Javascript实现点击插入内容到textarea光标处

4.9k 前端 6评论

本文用JavaScript实现在textarea光标处插入指定文本内容以及字符串。

点击按钮,可以把按钮的内容插入到textarea文本框内光标处,光标默认在文本框开头。

通过其他的js就可以实现文本框插入表情选中文字加粗、内容中插入图片等等。

>>>【演示地址

HTML代码:

<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);">{PHP code here}</a>
    </label>
</form>

Javascript代码:

<script type="text/javascript">
    var text = document.getElementById('text');
    var insert = document.getElementById('insert');
    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;
            myField.focus();
        } else {
            myField.value += myValue;
            myField.focus();
        }
    }
</script>

 

参考资料:

  1. Insert text into textarea at cursor position (Javascript)
  2. jquery 在textarea光标处插入内容

上一篇:
下一篇:

6条评论

J
Jack says: 回复

想借问声,想加多几个按钮,只有第一个可以插入内容,其他的不成…
例如:
<a href=”void(0);” rel=”nofollow”>{PHP code here1}</a>

<a href=”void(0);” rel=”nofollow”>{PHP code here2}</a>

<a href=”void(0);” rel=”nofollow”>{PHP code here3}</a>

歪麦 says: 作者

要修改点击获取内容的方式

r
rm says:

🙂

b
broucetrong says: 回复

保姆级博客,实在良心,试了一下成功了,多谢

w
wrg_光 says: 回复

超级有用,赞

失落 says: 回复

牛的,不过不支持撤销了,再继续研究研究

发表回复

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

昵称 *