业务需求：按下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换行的更多相关文章

  1. C#.NET常见问题(FAQ)-如何把文本复制粘贴到文本框的光标位置

    前面已经通过Clipborad.SetText之后,这里就要先把目标文本框的文本改成插入之后的值,然后修改光标所在位置  

  2. 可编辑div中包含子元素时获取光标位置不准确的问题

    前言: 高亮显示输入框中的关键字符,这就必须得用到可编辑div(或其他标签)元素了,这时我们需要获取光标的位置,以便插入字符. 正文: 正常情况下获取光标位置,代码如下: function getPo ...

  3. android EditText获取光标位置并安插字符删除字符

    android EditText获取光标位置并插入字符删除字符1.获取光标位置int index = editText.getSelectionStart(); 2.在光标处插入字符int index ...

  4. Android EditText获取光标位置并插入字符删除字符

    1.获取光标位置 int index = editText.getSelectionStart(); 2.在光标处插入字符 int index = editText.getSelectionStart ...

  5. js获取光标位置

    js获取光标位置   var TT = { /* * 获取光标位置 * @Method getCursorPosition * @param t element * @return number */ ...

  6. Jquery获取下拉选择节点名称值赋给textbox文本框 获取 父节点的栏目名称编号

    <label for="parentNode" style="float:left" >父级栏目:</label> <select ...

  7. Javascript实例技巧精选(7)—设置和获取文本框与文本域的光标位置（兼容IE和Chrome,Firefox）

    >>点击这里下载完整html源码<< 截图如下: 本实例描述了如何用Javascript来控制和获取文本框/文本域的鼠标光标位置,以下代码兼容IE和Chrome,Firefox ...

  8. Silverlight中文本框添加回车事件后，换行无法清除的解决方法

    在开发Silverlight的项目中,为了更好的用户体验,我们常要给一些控件添加一些快捷键.然而,在Silverlight中当用户回车提交后,光标停留在文本框的第二行怎么也清除不掉,经过一段时间研究, ...

  9. javastscript获取光标位置

    需求是获取某元素的内容,然后将该内容插入到文本框当前的光标位置 (function($) { $.fn.extend({ insertAtCaret: function(myValue) { var ...

随机推荐

  1. python操作数据库PostgreSQL

    1.简述 python可以操作多种数据库,诸如SQLite.MySql.PostgreSQL等,这里不对所有的数据库操作方法进行赘述,只针对目前项目中用到的PostgreSQL做一下简单介绍,主要包括 ...

  2. 2017年TOP100summit开幕在即， 15位大咖担任联席主席甄选最值得学习的100个研发案例

    从万维网到物联网,从信息传播到人工智能,20年间软件研发行业趋势发生了翻天覆地的变化.大数据.云计算.AI等新兴领域逐渐改变我们的生活方式,Devops.容器.深度学习.敏捷等技术方式和工作理念对软件 ...

  3. 专访|HPE测试中心总监徐盛：测试新思维-DevOps，持续测试，更敏捷，更快速

    2016年7月22日,「HPE&msup软件技术开放日」将在上海浦东新区,张江高科技园区纳贤路799号科荣大厦小楼2楼举办,msup携手HPE揭秘全球测试中心背后的12条技术实践. 徐盛:HP ...

  4. POJ_3186_Treats for the Cows

    Treats for the Cows Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 6568   Accepted: 34 ...

  5. Help Jimmy POJ - 1661 数字三角DP

    题意:中文 https://vjudge.net/problem/POJ-1661 题解:设两个dp数组,dpl[i]存 从第i块板左边到地上所花的最短时间,dpr[i]存右边的. 将所有板按高度排序 ...

  6. REDIS 六. 修复方案

    六. 修复方案 6.1 禁止一些高危命令(重启redis才能生效) 修改 redis.conf 文件,禁用远程修改 DB 文件地址 rename-command FLUSHALL "&quo ...

  7. ElasticSearch报 EsThreadPoolExecutor[search, queue capacity = 1000, org.elasticsearch.common.util.concurrent.EsThreadPoolExecutor@c0efba

    ElasticSearch报以下错误的解决办法: "type": "es_rejected_execution_exception", "reason ...

  8. Python面试数据库

    1.列举常见的关系型数据库和非关系型都有那些? 关系型 : MySQL,SQL Server ,Oracle , Sybase, DB2 非关系型 : Redis, MongodDB 2.MySQL常 ...

  9. centos7设置iptables

    https://www.linuxidc.com/Linux/2017-10/147238.htm

  10. oracle行转列，列转行

    多行转字符串这个比较简单,用||或concat函数可以实现 SQL Code select concat(id,username) str from app_userselect id||userna ...