在光标处插入字符串的实现代码 兼容IE,Firefox

代码如下:

// 在光标处插入字符串
// myField 文本框对象
// 要插入的值
function insertAtCursor(myField, myValue)
{
//IE support
if (document.selection)
{
myField.focus();
sel = document.selection.createRange();
sel.text = myValue;
sel.select();
}
//MOZILLA/NETSCAPE support
else if (myField.selectionStart || myField.selectionStart == '0')
{
var startPos = myField.selectionStart;
var endPos = myField.selectionEnd;
// save scrollTop before insert
var restoreTop = myField.scrollTop;
myField.value = myField.value.substring(0, startPos) + myValue + myField.value.substring(endPos,myField.value.length);
if (restoreTop > 0)
{
// restore previous scrollTop
myField.scrollTop = restoreTop;
}
myField.focus();
myField.selectionStart = startPos + myValue.length;
myField.selectionEnd = startPos + myValue.length;
} else {
myField.value += myValue;
myField.focus();
}
}

下面是我们演示代码：

// 在光标处插入字符串
// myField 文本框对象
// 要插入的值
function insertAtCursor(myField, myValue)
{
//IE support
if (document.selection)
{
myField.focus();
sel = document.selection.createRange();
sel.text = myValue;
sel.select();
}
//MOZILLA/NETSCAPE support
else if (myField.selectionStart || myField.selectionStart == '0')
{
var startPos = myField.selectionStart;
var endPos = myField.selectionEnd;
// save scrollTop before insert
var restoreTop = myField.scrollTop;
myField.value = myField.value.substring(0, startPos) + myValue + myField.value.substring(endPos,myField.value.length);
if (restoreTop > 0)
{
// restore previous scrollTop
myField.scrollTop = restoreTop;
}
myField.focus();
myField.selectionStart = startPos + myValue.length;
myField.selectionEnd = startPos + myValue.length;
} else {
myField.value += myValue;
myField.focus();
}
}

将鼠标定位到这里的任意位置，然后点击下面的按钮，即可测试效果

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

  • javascript转换字符串为dom对象（字符串动态创建dom）

    前言: 在javascript里面动态创建标准dom对象一般使用: var obj = document.createElement('div'); 然后再给obj设置一些属性. 但是,在实际使用过程中,有些人可能会想,要是能这样创建标准的dom对象就好了 伪代码:var obj=strToDom('<div id="div_1" class="div1">Hello World!</div>'); 那么今天的目的就是教大家怎么去实现一个这样

  • javascript下高性能字符串连接StringBuffer类

    复制代码 代码如下: function StringBuffer(){ this.__strings__ = new Array(); } StringBuffer.prototype.append = function(str){ this.__strings__.push(str); }; StringBuffer.prototype.toString = function(){ this.__strings__.join(" "); }; 其实上面的代码,主要利用了js的数组原理

  • javascript中字符串拼接需注意的问题

    在开发中大家也都会注意尽量使用StringBuilder而不采用普通的字符串拼接方式.但是可能大部分开发者却忽略了js中也需要注意这种效率问题. 下面进行一项性能测试,用事实来说话! 复制代码 代码如下: function xntest(){ var d1=new Date(); var str=""; for(var i=0;i<10000;i++){ str+="stext"; } var d2=new Date(); document.write(&qu

  • JavaScript 字符串操作的几种常见方法

    连接字符串 连接字符串 var str1="Javascript字符串连接"+",方法一"; var str2="方法二"; str2+="使用+=连接"; var str3="方法三"; str3+=",多字符串连接"+".同时使用多个字符连接"+",正确!"; var str4="字符串连接"; str4=str4.conc

  • Fastest way to build an HTML string(拼装html字符串的最快方法)

    Fastest way to build an HTML string(拼装html字符串的最快方法)

    Fastest way to build an HTML stringPosted in 'Code Snippets, JavaScript' by James on May 29th, 2009 原文:http://james.padolsey.com/javascript/fastest-way-to-build-an-html-string/ 复制代码 代码如下: var arr = ['item 1', 'item 2', 'item 3', ...], list = ''; for

  • javascript中字符串替换函数replace()方法与c# 、vb 替换有一点不同

    1.<script language="javascript"> var str = "ajfhslajd and"; //在此我想将字母a替换成字母A alert(str.replace("a","A")); </script> 结果:是只有替换了字符串的首字符a 这不是我要的结果 看↓ 2.replace()支持正则表达式,它可以按照正则表达式的规则匹配字符或字符串,然后给予替换! <scri

  • JavaScript trim 去除字符串空格的三种方法(附代码详解)

    方法一: 正则替换 推荐个人认为最好的方法.采用的是正则表达式,这是最核心的原理. 下面是代码原文 复制代码 代码如下: <SCRIPT LANGUAGE="JavaScript"> <!-- //出处:网上搜集 //For more visit http://www.jb51.net // Trim() , Ltrim() , RTrim() String.prototype.Trim = function() { return this.replace(/(^\s

  • JS下高效拼装字符串的几种方法比较与测试代码

    在使用Ajax提交信息时,我可能常常需要拼装一些比较大的字符串通过XmlHttp来完成POST提交.尽管提交这样大的信息的做法看起来并不优雅,但有时我们可能不得不面对这样的需求.那么JavaScript中对字符串的累加速度如何呢?我们先来做下面的这个实验.累加一个长度为30000的字符串. 测试代码1 - 耗时: 14.325秒 复制代码 代码如下: var str = ""; for (var i = 0; i < 50000; i++) { str += "xxxx

  • 在光标处插入字符串的实现代码 兼容IE,Firefox

    复制代码 代码如下: // 在光标处插入字符串 // myField 文本框对象 // 要插入的值 function insertAtCursor(myField, myValue) { //IE support if (document.selection) { myField.focus(); sel = document.selection.createRange(); sel.text = myValue; sel.select(); } //MOZILLA/NETSCAPE suppo

  • vue项目中在可编辑div光标位置插入内容的实现代码

    vue项目中在可编辑div光标位置插入内容 html: <div class="mouse-move fl f12 h22 lh22 mg-r5 sms-item" @dragstart="dragStart($event, item.labelName)" draggable='true' v-for="(item, index) in modelCommonList" :key="index" @click=&quo

  • JavaScript中在光标处插入添加文本标签节点的详细方法

    正确的方法是正确运用Selection对象和Range对象,实现在光标当前位置插入文本或结点.但是这两个对象在IE和标准的DOM方式的运用方法是不同的. 思路:首先获得用户的选区(光标当前位置可理解成起始和终止位置一样的选区).然后,从Selection对象转成Range对象.目的是利用Range对象的方法插内容进去.最后,插入动作结束后将光标移到插入内容的后面. var sel = win.document.selection; //IE var sel = win.getSelection(

  • JQuery在光标位置插入内容的实现代码

    复制代码 代码如下: (function($){ $.fn.extend({ insertAtCaret: function(myValue){ var $t=$(this)[0]; if (document.selection) { this.focus(); sel = document.selection.createRange(); sel.text = myValue; this.focus(); } else if ($t.selectionStart || $t.selection

  • javascript在一段文字中的光标处插入其他文字

    例如:一个文本框里有一段文字,我要通过点击鼠标并且在相应的地方插入文本 我是这样做的:先获得文本框的值TextArea.Value,然后.TextArea.Value+其他文本 <script type="text/javascript">    function setCaret(textObj){     if(textObj.createTextRange){         textObj.caretPos=document.selection.createRang

  • javascript实现 在光标处插入指定内容

    <TEXTAREA ROWS="20" COLS="100" id='test'>123456798<B>123</B></TEXTAREA> <INPUT TYPE="button" value='insert("abc")' OnClick='_insertText("abc")'> <SCRIPT LANGUAGE="Java

  • CSS expression控制图片自动缩放效果代码[兼容 IE,Firefox]

    今天用了很久时间终于解决了这个问题,基本完美了,唯一不完美的就是 IE 6 只有在图片完全下载完成后才会自动调整大小,不过聊胜于无,总比进入页面后看到长长的横向滚动条舒服的多,这里使用了 expression,但是利用了一次加载,所以 expression 不会造成内存泄漏.当然,如果你有更好的解决方案,希望能与我交流. 代码如下: .Image { max-width:600px;height:auto;cursor:pointer; border:1px dashed #4E6973;pad

  • js 禁止选择功能实现代码(兼容IE/Firefox)

    ie,chrome可能通过JS的onselectstart 例如 复制代码 代码如下: <body onselectstart="return false"> firefox可以通过CSS 复制代码 代码如下: *{ -moz-user-select:none }

  • javascript获取select的当前值示例代码(兼容IE/Firefox/Opera/Chrome)

    JavaScript获取Select当前值写法:var value = document.getElementById("select").options[document.getElementById("select").options.selectedIndex].value;var text = document.getElementById("select").options[document.getElementById("s

  • 一个超简单的JS拖拽实现代码(兼容IE,Firefox)

    runcode /** *取得元素的真实css属性 *@param {Object} d 元素 *@param {String} a 元素的css属性名 *@version 0.2 */ function gs(d,a){ if (d.currentStyle){ var curVal=d.currentStyle[a] }else{ var curVal=document.defaultView.getComputedStyle(d, null)[a] } return curVal; } /

随机推荐