textarea在光标后追加内容，并将换行符替换成br标签

「爱情、让人受尽委屈。」 2023-06-19 11:12 116阅读 0赞

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript" src="jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
    //在光标处插入字符串
    // myField    文本框对象
    // myValue 要插入的值
    function insertAtCursor(myField, myValue)
    {
        //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();
        }
    }
    function replace(strValue){
    	return strValue.replace(/\r\n/g, '<br/>').replace(/\n/g, '<br/>').replace(/\s/g, ' ');
    }
    	$(function(){
    		$("#btn").click(function(){
    			insertAtCursor($("#area").get(0),$("input[name=content]").val());
    			
    		});
    		
    		$("#get").click(function(){
    			alert(replace($("#area").val()));
    			
    		});
    		
    	});
    
    
    
    </script>
    </head>
    <body>
    <button id="btn">在光标后追加</button>
    要追加的内容：<input name="content">
    <textarea id="area" style="width: 400px;height: 300px;"></textarea>
    <button id="get">获取带换行符的textarea内容</button>
    </body>
    </html>