兼容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>


This entry was posted in WEB前端 and tagged , . Bookmark the permalink.
月小升QQ 2651044202, 技术交流QQ群 178491360
首发地址:月小升博客https://java-er.com/blog/js-select/
无特殊说明,文章均为月小升原创,欢迎转载,转载请注明本文地址,谢谢
您的评论是我写作的动力

Leave a Reply

Your email address will not be published. Required fields are marked *

*

*

  

About Me

静水流深,水滴石穿