文本框获取光标位置 ---- ctrl+enter换行

业务需求：按下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
      }
    })
  }
}

文本框获取光标位置 ---- ctrl+enter换行

猜你喜欢