兼容chrome的UBB 插入代码,选中文本


<form id="form1" name="form1" method="post" action="">
    <label>
        <textarea name="text" id="text" cols="45" rows="10">
        这是测试内容,请在任意位置插入内容。
        这是测试内容,请在任意位置插入内容。
        这是测试内容,请在任意位置插入内容。
        这是测试内容,请在任意位置插入内容。
 
        </textarea>
 
        <a id="insert" href="javascript:void(0);">{Java code here}</a>
 
        <div id="test">222</div>
    </label>
</form>
 
 
<script type="text/javascript">
    var text = document.getElementById('text');
    var insert = document.getElementById('insert');
    var test = document.getElementById('test');
    insert.onclick = function () {
        insertAtCursor(text, this.innerHTML);
    };
 
    function insertAtCursor(myField, myValue) {
        if (document.selection) {
            //IE support
            myField.focus();
            sel = document.selection.createRange();
            sel.text = myValue;
            sel.select();
        } else if (myField.selectionStart || myField.selectionStart == '0') {
            //MOZILLA/NETSCAPE support
            var startPos = myField.selectionStart;
            var endPos = myField.selectionEnd;
            var beforeValue = myField.value.substring(0, startPos);
            var afterValue = myField.value.substring(endPos, myField.value.length);
 
            myField.value = beforeValue + myValue + afterValue;
 
            myField.selectionStart = startPos + myValue.length;
            myField.selectionEnd = startPos + myValue.length;
            test.innerHTML = startPos;
            myField.focus();
        } else {
            myField.value += myValue;
            myField.focus();
        }
    }
</script>

以下为加强版本,核心要点,直接替换myValue 改成选择的内容

var selectValue = myField.value.substring(startPos, endPos); //选取内容
myValue = "[b]"+ selectValue + "[/b]";
  function insertAtCursor(myField, myValue) {
 
 
 
 		bottom.innerHTML = "0";
        if (document.selection) {
            //IE support
            myField.focus();
            sel = document.selection.createRange();
            sel.text = myValue;
            sel.select();
           // bottom.innerHTML = "1";
        } else if (myField.selectionStart || myField.selectionStart == '0') {
            //MOZILLA/NETSCAPE support
            var startPos = myField.selectionStart;// 选中起点 
            var endPos = myField.selectionEnd; //选中终点
            var beforeValue = myField.value.substring(0, startPos); //起点之前内容
            var afterValue = myField.value.substring(endPos, myField.value.length); //终点最后内容
            var selectValue = myField.value.substring(startPos, endPos); //选取内容
            myValue = "[b]"+ selectValue + "[/b]";
            myField.value = beforeValue + myValue + afterValue;
 
            myField.selectionStart = startPos + myValue.length;
            myField.selectionEnd = startPos + myValue.length;
            myField.focus();
            //bottom.innerHTML = selectValue;
        } else {
            myField.value += myValue;
            myField.focus();
           // bottom.innerHTML = "3";
        }
    }
</script>
如果你是一名技术人员可加我QQ 2651-0442-02,如果你是java技术人还可以加入QQ群 1784-9136-0
你将得到的不仅仅是技术的交流,还有职业机会,人生解惑.
首发地址:月小升博客https://java-er.com/blog/js-select/
无特殊说明,文章均为月小升原创,欢迎转载,转载请注明本文地址,谢谢
此条目发表在 WEB前端 分类目录,贴了 , 标签。将固定链接加入收藏夹。
既然来了,就评论一下,不会怀孕的

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

*

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">