在 textarea中指定位置插入内容

完全使用 javascript 来实现,这里我也是从其它博客转载来一部分实现的,可以完美解决IE7+不兼容问题,并且包含谷歌、火狐,更不用说什么360/360急速、搜狗浏览器了

function insertAtCursor(myField, myValue) { 
    //IE support
    if (document.selection) { 
        document.selection.empty();
        caretPos.text = myValue;
        caretPos.select();
        myField.focus(); 
    } 
    //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) { 
        myField.scrollTop = restoreTop; 
        } 
        myField.focus(); 
        myField.selectionStart = startPos + myValue.length; 
        myField.selectionEnd = startPos + myValue.length; 
    } else { 
        myField.value += myValue; 
        myField.focus(); 
    } 
} 

myField 参数为 js document 对象,比如:document.getElementById(""),myValue 为要插入的值

caretPos 对象为什么要定义成全局变量?

往往场景在文本域中,鼠标已经放入焦点了,但是要插入内容,所以去选择内容时,焦点失去了,所以把变量定义成全局的,就是在文本域中获得焦点时,就把位置保存起来,这个只适用于IE情况。

var caretPos ;
function setPos(){
	if (document.selection) { //IE
		caretPos =  document.selection.createRange(); 
	}
}
扫描二维码关注公众号,回复: 484742 查看本文章

html代码

<textarea rows="4" onchange="setPos()" onfocus="setPos()" ></textarea>

一定要加上onchange="setPos()"  ,因为每次手动在文本域里面添加内容时,在插入数据,IE记住的点事在输入的内容之前,所以会把自己手动输入的内容给覆盖掉

当做笔记记下来,以后肯定用得着

猜你喜欢

转载自fan7421436.iteye.com/blog/2297828