业务需求：按下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. C#调用C++ DLL的方式

    动态链接库(DLL)是一个包含可由多个程序同时使用的代码和数据的库,DLL不是可执行文件.可以说在windows操作系统中随处可见,打开主分区盘下的system32.在一些项目中,如果有大量运算或者涉 ...

  2. Linux下pip使用国内源

    pip国内的一些镜像   阿里云 http://mirrors.aliyun.com/pypi/simple/   中国科技大学 https://pypi.mirrors.ustc.edu.cn/si ...

  3. OpenCV学习笔记之课后习题练习2-5

    5.对练习4中的代码进行修改,参考例2-3,给程序加入滚动条,使得用户可以动态调节缩放比例,缩放比例的取值为2-8之间.可以跳过写入磁盘操作,但是必须将变换结果显示在窗口中. 参考博文:blog.cs ...

  4. opencv的基本数据类型CvPoint,CvSize,CvRect,CvScalar

    转自http://blog.csdn.net/gdut2015go/article/details/46301821 opencv的基本数据类型CvPoint,CvSize,CvRect,CvScal ...

  5. JavaScript学习11.30

    window.history:包含浏览器的历史,可以不时用window这个前缀history.back():加载历史列表的前一个URLhistory.forward():加载历史列表的后一个URLwi ...

  6. 【Python算法】遍历(Traversal)、深度优先(DFS)、广度优先(BFS)

    图结构: 非常强大的结构化思维(或数学)模型.如果您能用图的处理方式来规范化某个问题,即使这个问题本身看上去并不像个图问题,也能使您离解决问题更进一步. 在众多图算法中,我们常会用到一种非常实用的思维 ...

  7. php 实现 二维码 扫描登录

    本人简单实现的示例,使用任意二维码工具打开二维码对应链接 http://www.54php.cn/demo1/scan 原理介绍: 第一步:访问登录页面,生成唯一key,例如MkhjDFL=,并且将此 ...

  8. Github常用命令【转】

    本地仓库(local repository) 创建一个本地仓库的流程: 为本地仓库创建一个目录 在目录中执行 git init 对本地仓库所做的改变(例如添加.删除文件等)首先加入到本地仓库的 Ind ...

  9. 总结web应用中常用的各种cache（转）

    add by zhj:还没来得及看,有空再细看 原文:https://ruby-china.org/topics/19389 cache是提高应用性能重要的一个环节,写篇文章总结一下用过的各种对于动态 ...

  10. 虫师的性能测试思想html网页学习

    http://www.cnblogs.com/fnng/category/387349.html