业务需求：按下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. JAVAORM框架之Mybatis (Ibatis) 详解

    目录 Mybatis基础概念 Mybatis开放方式演进 Mybatis框架核心要点 关联查询 延迟加载(懒加载) 动态SQL Mybatis缓存 Mybatis逆向工程 PageHelper分页插件 ...

  2. IntelliJ IDEA最新版完美破解激活

    IntelliJ IDEA号称是目前最好最强最智能的Java IDE,默认已经集成了几乎所有主流的开发工具和框架.目前最新版为2017.2.5(2017.2.5已经不是最新,但是写教程的时候2017. ...

  3. XCache 一种快速可靠的PHP操作码缓存

    1,错误报告开启 错误报告是在PHP中一个非常有用的功能,应同时在开发阶段启用. 这可以帮助我们确定我们的代码中的问题. 最常用的功能是“E_ALL”,这有助于我们发现所有的警告和严重错误. 必须指出 ...

  4. poj1182 食物链【并查集-好题！】

    动物王国中有三类动物A,B,C,这三类动物的食物链构成了有趣的环形.A吃B, B吃C,C吃A.  现有N个动物,以1-N编号.每个动物都是A,B,C中的一种,但是我们并不知道它到底是哪一种. 有人用两 ...

  5. java基础解析系列(六)---注解原理及使用

    java基础解析系列(六)---注解原理及使用 java基础解析系列(一)---String.StringBuffer.StringBuilder java基础解析系列(二)---Integer缓存及 ...

  6. SHU 第15届上海大学程序设计联赛夏季赛[热身赛] 第三题(G题) - 英语成绩

    看完题目就觉得是个图论题…… 每个人的成绩就是vertice,两个人的分数差就是edge,那么肯定类似于一种relax的方式,不断将每个人的成绩的min往上提, 当然,单纯的遍历一遍G.E肯定不可能就 ...

  7. Oracle安装部署之linux OS install oracle database安装脚本

    #!/bin/bash#Purpose:Create and config oracle install.#Usage:Log on as the superuser('root') #1.creat ...

  8. Oracle备份恢复之逻辑备份

    exp 交互模式:导出scott用户下的emp表. [oracle@localhost ~]$ exp Export: Release 10.2.0.1.0 - Production on Thu N ...

  9. 特征向量-Eigenvalues_and_eigenvectors#Graphs 线性变换

    总结: 1.线性变换运算封闭,加法和乘法 2.特征向量经过线性变换后方向不变 https://en.wikipedia.org/wiki/Linear_map Examples of linear t ...

  10. 删除未加入svn版本控制的文件（包括文件夹）

    删除未加入svn版本控制的文件(包括文件夹) svn status | grep '^?' | awk '{print $2}' | xargs rm -rf