文字框獲取游標位置 ---- ctrl+enter換行
阿新 • • 發佈：2018-12-12
業務需求：按下enter鍵傳送資訊，按下ctrl+enter鍵換行
下面程式碼是網上找的資料
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Demo ： Textarea 元素的游標位置</title> <style type="text/css"> #result { font-size: 18px; line-height: 25px; padding-left: 20px; } </style> </head> <body> <div> <h1> Textarea 元素的游標位置</h1> <ul> <li>獲取 Textarea 元素當前的游標位置</li> <li>設定回原先的 Textarea 元素的游標位置</li> <li>在 Textarea 元素的游標位置插入文字</li> </ul> <form action="#"> <textarea id="test" rows="8" cols="50"></textarea> <p> <input type="button" id="get" value="Get Cursor Position" /> <input type="button" id="set" value="Set Cursor Position" /> <input type="button" id="add" value="Add Text After Cursor Position" /> </p> </form> <h2> Textarea Range：</h2> <div id="result"> </div> <script type="text/javascript"> document.getElementById("get").onclick = function () { //alert(tx.value.length); var tx = document.getElementById("test"); var re = document.getElementById("result");var pos = cursorPosition.get(tx); re.innerHTML = ("<strong>Range :</strong> (" + pos.start + ", " + pos.end + ")<br /><strong>Text :</strong> " + (!pos.text ? '//--' : pos.text)); } document.getElementById("set").onclick = function () { var tx = document.getElementById("test"); var re = document.getElementById("result"); var pos = cursorPosition.get(tx); cursorPosition.set(tx, pos); re.innerHTML = ""; } document.getElementById("add").onclick = function () { var tx = document.getElementById("test"); pos = cursorPosition.get(tx); cursorPosition.add(tx, pos, input = prompt("你想插入替換的文字：", "")); } /** * cursorPosition Object */ var cursorPosition = { get: function (textarea) { var rangeData = { text: "", start: 0, end: 0 }; if (textarea.setSelectionRange) { // W3C textarea.focus(); rangeData.start = textarea.selectionStart; rangeData.end = textarea.selectionEnd; rangeData.text = (rangeData.start != rangeData.end) ? textarea.value.substring(rangeData.start, rangeData.end) : ""; } else if (document.selection) { // IE textarea.focus(); var i, oS = document.selection.createRange(), // Don't: oR = textarea.createTextRange() oR = document.body.createTextRange(); oR.moveToElementText(textarea); rangeData.text = oS.text; rangeData.bookmark = oS.getBookmark(); // object.moveStart(sUnit [, iCount]) // Return Value: Integer that returns the number of units moved. for (i = 0; oR.compareEndPoints('StartToStart', oS) < 0 && oS.moveStart("character", -1) !== 0; i++) { // Why? You can alert(textarea.value.length) if (textarea.value.charAt(i) == '\r') { i++; } } rangeData.start = i; rangeData.end = rangeData.text.length + rangeData.start; } return rangeData; }, set: function (textarea, rangeData) { var oR, start, end; if (!rangeData) { alert("You must get cursor position first.") } textarea.focus(); if (textarea.setSelectionRange) { // W3C textarea.setSelectionRange(rangeData.start, rangeData.end); } else if (textarea.createTextRange) { // IE oR = textarea.createTextRange(); // Fixbug : ues moveToBookmark() // In IE, if cursor position at the end of textarea, the set function don't work if (textarea.value.length === rangeData.start) { //alert('hello') oR.collapse(false); oR.select(); } else { oR.moveToBookmark(rangeData.bookmark); oR.select(); } } }, add: function (textarea, rangeData, text) { var oValue, nValue, oR, sR, nStart, nEnd, st; this.set(textarea, rangeData); if (textarea.setSelectionRange) { // W3C oValue = textarea.value; nValue = oValue.substring(0, rangeData.start) + text + oValue.substring(rangeData.end); nStart = nEnd = rangeData.start + text.length; st = textarea.scrollTop; textarea.value = nValue; // Fixbug: // After textarea.values = nValue, scrollTop value to 0 if (textarea.scrollTop != st) { textarea.scrollTop = st; } textarea.setSelectionRange(nStart, nEnd); } else if (textarea.createTextRange) { // IE sR = document.selection.createRange(); sR.text = text; sR.setEndPoint('StartToEnd', sR); sR.select(); } } } </script> </div> </body> </html>
jq下設定換行
//監聽Enter鍵自動提交事件 var keyCtrl = true $(document).keydown(function (event) { if (event.keyCode === 17) { keyCtrl = true } if (event.keyCode === 13 && !keyCtrl) { if ($('#textArea').val().trim() === '') { $('#modalTips').html('傳送內容不能為空').fadeIn().delay(3000).fadeOut(); $('#textArea').val('') return false } sendMessage($('#textArea').val(), 4) } if (event.keyCode === 13 && keyCtrl) { var tx = document.getElementById("textArea"); var pos = cursorPosition.get(tx); cursorPosition.add(tx, pos, '\n'); } }); $(document).keyup(function (event) { if (event.keyCode === 17) { keyCtrl = false } });
react下設定換行
// 監聽enter keydown監聽 modelObj.keyUpCtrl為是否按下ctrl鍵，預設false const listenEnter = (e) => { if (e === 17) { //ctrl鍵 dispatch({ type: `${namespace}/updateData`, payload: { keyUpCtrl: true } }) } if (e === 13 && !modelObj.keyUpCtrl) { sendTxt() //enter傳送 } if (e === 13 && modelObj.keyUpCtrl) { let tx = document.getElementById("txtArea"); let pos = cursorPosition.get(tx); cursorPosition.add(tx, pos, '\n'); dispatch({ type: `${namespace}/updateData`, payload: { textArea: tx.value } }) pos.start++; pos.end++; cursorPosition.set(tx, pos); } } // 監聽enter keyup監聽 const listenEnterUp = (e) => { if (e === 17) { //ctrl鍵 dispatch({ type: `${namespace}/updateData`, payload: { keyUpCtrl: false } }) } }