业务需求：按下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. ArchLinux 添加国内镜像源

    $ vim /etc/pacman.d/mirrorlist # 在最前面添加一行,这样就成功添加了网易的源: Server = http://mirrors.163.com/archlinux/$r ...

  2. css实现表格的td里面的内容居中.

    <td align="center" valign="middle">前一个是水平居中 后一个是垂直居中对应的css写法:<td style= ...

  3. Deplearning.AI-吴恩达【中文课后作业】

    [吴恩达课后作业目录] 课程 周数 名称 类型 语言 地址 课程1 - 神经网络和深度学习 第1周 深度学习简介 测验 中英 传送门 无编程作业 编程作业 —— —— 第2周 神经网络基础 测验 中英 ...

  4. Query实例的ajax应用之二级联动的后台是采用php来做的

    jQuery实例的ajax应用之二级联动的后台是采用php来做的,前台通过jquery的ajax方式实现二级联动数据库表设计 csj_trade id int(11) auto_increment  ...

  5. easyui---基础组件：window

    window 依赖下面三个组件,就是继承,所以下面的特性和方法 事件都可以用 draggable resizable panel window 和panel不同之处,可以有拖拽移动draggable, ...

  6. 每日定时收集MySQL日志并发送邮件

    本次脚本系统版本 MySQL日常运行产生的慢查询日志收集并且发送邮件 vim mysql-slow-log.sh # 这是一个收集慢查询的脚本,每天收集MySQL慢查询日志并且发送邮件#!/bin/b ...

  7. ubuntu14.04下编译支持opengl的opencv

    在学习基于opencv的AR时,编译程序遇到报错,发现opencv不支持opengl.网上原因得知,在编译opencv时,opencv2.4以后的版本中默认ENABLE_OPENGL = NO,只需要 ...

  8. Oracle体系结构之Oracle静态监听配置模板

    1.监听程序配置:[oracle@localhost admin]$ vim listener.ora# listener.ora Network Configuration File: /u01/a ...

  9. Hello Redis - Voting on articles

    Redis in Action JOSIAH L. CARLSON MANNING Shelter Island ONE_WEEK_IN_SECONDS = 7 * 86400 VOTE_SCORE ...

  10. LDAP summary-- Python ldap

    A DN is comprised of a series of RDNs (Relative Distinguished Names) found by walking UP the tree (D ...