脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js在文本框光标处添加字符

js实现在文本框光标处添加字符的方法介绍

 更新时间：2012年11月24日 15:17:17   作者：  
在开发应用中，经常会遇到一些技术上的问题，比如：怎样让js在文本框光标处添加字符，本文将以此问题进行详细介绍，需要了解的朋友可以参考下
复制代码 代码如下:

<script language="javascript" type="text/javascript">
function Button4_onclick(obj) {
obj.focus();
var rng=document.selection.createRange();
rng.setEndPoint("StartToStart",obj.createTextRange());
var eng=document.selection.createRange();
eng.setEndPoint("EndToEnd",obj.createTextRange());
var kone = document.getElementByIdx("Text1");
kone.value=rng.text + "插入字符" + eng.text;
}
</script>
<input id="Text1" type="text" value="1235467890"/>
<input id="Button4" type="button"
value="button" onclick="return Button4_onclick(Text1)" />

复制代码 代码如下:

<%@ Page Language="C#" AutoEventWireup="true" AspCompat="true" CodeBehind="WebForm1.aspx.cs"
Inherits="SJLERP.WebForm1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<script type="text/javascript">
function setCaret(textObj) {
if (textObj.createTextRange) {
textObj.caretPos = document.selection.createRange().duplicate();
}
}
function insertAtCaret(textObj, textFeildValue) {
if (document.all) {
if (textObj.createTextRange && textObj.caretPos) {
var caretPos = textObj.caretPos;
caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' ' ? textFeildValue + ' ' : textFeildValue;
} else {
textObj.value = textFeildValue;
}
} else {
if (textObj.setSelectionRange) {
var rangeStart = textObj.selectionStart;
var rangeEnd = textObj.selectionEnd;
var tempStr1 = textObj.value.substring(0, rangeStart);
var tempStr2 = textObj.value.substring(rangeEnd);
textObj.value = tempStr1 + textFeildValue + tempStr2;
} else {
alert("This version of Mozilla based browser does not support setSelectionRange");
}
}
}
</script>
<form id="form1" action="" onsubmit="" method="post" enctype="text/plain">
<p>
<textarea name="tarea" rows="" cols="" style="width:300px;height:120px;"
onselect="setCaret(this);"
onclick="setCaret(this);"
onkeyup="setCaret(this);" >例子例子例 Forget Never 子例子例子 asp.net </textarea>
<br/><br/>
<input type="text" name="textfield" style="width:220px;" value="插入FireFox"/>
<br/>
<input type="button" value="插入"
onclick="insertAtCaret(this.form.tarea,this.form.textfield.value);"/>
</p>
</form>
</html>
您可能感兴趣的文章:

相关文章

  • 浅析Javascript的自动分号插入(ASI)机制

    浅析Javascript的自动分号插入(ASI)机制

    我们大家都知道在写java和c时，必须要在语句后加分号，否则编译通不过。而js不同，存在自动分好插入机制，下文简称ASI。它会给源代码的 token 流自动插入分号。下面这篇文章我们就来谈谈Javascript的自动分号插入(ASI)机制。
    2016-09-09
  • 微信小程序 JS动态修改样式的实现方法

    微信小程序 JS动态修改样式的实现方法

    这篇文章主要给大家介绍了关于微信小程序JS动态修改样式的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2018-12-12
  • JavaScript实现简单的日历效果

    JavaScript实现简单的日历效果

    本文给大家分享的是一个简单的JavaScript制作的日历模板，小伙伴们可以根据自己的需求，继续补充，希望大家能够喜欢
    2016-09-09
  • 一个JS函数搞定网页标题(title)闪动效果

    一个JS函数搞定网页标题(title)闪动效果

    这篇文章主要介绍了使用JS函数实现网页标题(title)闪动效果的代码,需要的朋友可以参考下
    2014-05-05
  • js获取URL的参数的方法(getQueryString)示例

    js获取URL的参数的方法(getQueryString)示例

    getQueryString方法默认返回的是 string如果是int类型，则JS使用的时候，要进行转换一下，下面有个不错的示例，大家可以参考下
    2013-09-09
  • javascript实现不同颜色Tab标签切换效果

    javascript实现不同颜色Tab标签切换效果

    这篇文章主要为大家详细介绍了javascript实现不同颜色Tab标签切换效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-04-04
  • window.open 以post方式传递参数示例代码

    window.open 以post方式传递参数示例代码

    这篇文章主要介绍了window.open以post方式传递参数的方法,需要的朋友可以参考下
    2014-02-02
  • el-table el-table-column表头嵌套循环数据的示例代码

    el-table el-table-column表头嵌套循环数据的示例代码

    本文介绍了使用两个数组来实现el-table中表头的嵌套循环,一个数组用于循环表格数据,另一个用于循环表头,帮助读者更好地理解和应用表头嵌套功能,感兴趣的朋友跟随小编一起看看吧
    2024-09-09
  • 详解JavaScript中的数据类型转换

    详解JavaScript中的数据类型转换

    在JavaScript中，数据类型的转换是一项常见的任务，不同的数据类型之间需要相互转换以满足程序的需求，本篇博客将深入探讨JavaScript中的数据类型转换，包括隐式转换和显式转换的概念、转换规则和常见的数据类型转换示例
    2023-06-06
  • 使用plupload自定义参数实现多文件上传

    使用plupload自定义参数实现多文件上传

    这篇文章主要介绍了使用plupload自定义参数实现多文件上传的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2016-07-07

最新评论