JS在textarea在光标处插入内容代码

正文 6187字数 76,447阅读

代码一


			<textarea class="text" autocomplete="off" name="content" id="contentadddd" rows="10" style="width:100%;"></textarea>
			<span onclick="codeanddd();" style="cursor: pointer;color: #666;text-decoration: underline;">[scode]</span>

<script>
	// 在光标处插入字符串
    // myField    文本框对象
    // myValue 要插入的值
    function codeanddd()
    {
		var myField=document.getElementById('contentadddd');
		var myValue='[scode]scode[/scode]';
		
        //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();
        }
    }
</script>

Run code

Cut to clipboard

代码二


			<textarea class="text" autocomplete="off" name="content" id="contentadddd" rows="10" style="width:100%;"></textarea>
			<span onclick="insertText();" style="cursor: pointer;color: #666;text-decoration: underline;">[scode]</span>

<script>
	function insertText() {
            var obj = document.getElementById("contentadddd");
            var str = "[#$%$#]插入的内容";
               if (document.selection) {
                   obj.focus();
                   var sel = document.selection.createRange();

                   sel.text = str;

               } else if (typeof obj.selectionStart === 'number' && typeof obj.selectionEnd === 'number') {
                   var startPos = obj.selectionStart;
                   var endPos = obj.selectionEnd;
                    var tmpStr = obj.value;
                    obj.value = tmpStr.substring(0, startPos) + str + tmpStr.substring(endPos, tmpStr.length);
                } else {
                    obj.value += str;
            }
        }
</script>

Run code

Cut to clipboard

代码三

<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.0/jquery.min.js"></script>
			<textarea class="text" autocomplete="off" name="content" id="txtquestion" rows="10" style="width:100%;"></textarea>
			<span id="btnInsert" style="cursor: pointer;color: #666;text-decoration: underline;">[scode]</span>

<script>
	//jQuery光标处插入文本

        $(document).ready(function () {
            $("#btnInsert").click(function () {
                var obj = $("#txtquestion").get(0);
                var str = "[#$%$#]";
                if (document.selection) {
                    obj.focus();
                    var sel = document.selection.createRange();
                    sel.text = str;
                } else if (typeof obj.selectionStart === 'number' && typeof obj.selectionEnd === 'number') {
                    var startPos = obj.selectionStart;
                    var endPos = obj.selectionEnd;
                    var tmpStr = obj.value;
                    obj.value = tmpStr.substring(0, startPos) + str + tmpStr.substring(endPos, tmpStr.length);
                } else {
                    obj.value += str;
                }
            });
        });
</script>

Run code

Cut to clipboard

代码四

<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.0/jquery.min.js"></script>
			<textarea class="text" autocomplete="off" name="content" id="txtquestion" rows="10" style="width:100%;"></textarea>
			<span id="btnInsert" style="cursor: pointer;color: #666;text-decoration: underline;">[scode]</span>

<script>

(function ($) {
	$.fn.insertContent = function (myValue, t) {
		var $t = $(this)[0];
		if (document.selection) { //ie
			this.focus();
			var sel = document.selection.createRange();
			sel.text = myValue;
			this.focus();
			sel.moveStart('character', -l);
			var wee = sel.text.length;
			if (arguments.length == 2) {
				var l = $t.value.length;
				sel.moveEnd("character", wee + t);
				t <= 0 ? sel.moveStart("character", wee - 2 * t - myValue.length) : sel.moveStart("character", wee - t - myValue.length);

				sel.select();
			}
		} else if ($t.selectionStart || $t.selectionStart == '0') {
			var startPos = $t.selectionStart;
			var endPos = $t.selectionEnd;
			var scrollTop = $t.scrollTop;
			$t.value = $t.value.substring(0, startPos) + myValue + $t.value.substring(endPos, $t.value.length);
			this.focus();
			$t.selectionStart = startPos + myValue.length;
			$t.selectionEnd = startPos + myValue.length;
			$t.scrollTop = scrollTop;
			if (arguments.length == 2) {
				$t.setSelectionRange(startPos - t, $t.selectionEnd + t);
				this.focus();
			}
		}
		else {
			this.value += myValue;
			this.focus();
		}
	};
})(jQuery);
		$("#btnInsert").click(function () {$("#txtquestion").insertContent('code');})
</script>

Run code

Cut to clipboard

lizhenqiu blog

JS在textarea在光标处插入内容代码

相关日志

暂无评论 »

留下評論