业务需求：按下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. 【vue】vue.js安装教程/vue项目搭建

    前提:已安装nodejs——npm  (备注教程  “物理安装”  ) 第一步:建了一个managerSys文件夹,用于保存项目 第二步:从cmd进入该文件夹,之后开始安装vue.js相关 1)在该项 ...

  2. PAT甲1005 Spell it right【字符串】

    1005 Spell It Right (20 分) Given a non-negative integer N, your task is to compute the sum of all th ...

  3. poj1269 intersecting lines【计算几何】

    We all know that a pair of distinct points on a plane defines a line and that a pair of lines on a p ...

  4. 三维重建项目：Photo Tourism: Exploring Photo Collections in 3D

    项目地址:http://phototour.cs.washington.edu/ Photo Tourism是华盛顿大学的SFM重建的过程 Paper:Photo Tourism: Exploring ...

  5. 一个半径R质量m的均匀圆盘，绕其边缘且垂直的轴摆动，求摆动周期

  6. LAMP下安装zabbix流水

    一.安装zabbix (1)创建用户和组 [root@dbking zabbix-2.2.1]# groupadd zabbix [root@dbking zabbix-2.2.1]# useradd ...

  7. MySQL在windows下的noinstall安装

    1.解压mysql zip软件包 2.配置环境变量 3.修改配置文件my_default.ini添加如下: [mysqld] basedir=D:\MySQL\MySQL Server 5.6(mys ...

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

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

  9. GP服务中无Tasks

    发布GP服务,之后执行GP服务时,发现无Tasks,如下图所示 正常情况应该如下图 问题原因在于,arcmap与server版本不一致~~ (10.4.1arcmap 与 10.2.2 server) ...

  10. CF750F New Year and Finding Roots 构造+树论

    正解:构造 解题报告: 传送门! 交互题交互题!哇好新鲜啊QwQ 首先考虑最傻逼的做法,应该是每个人都能想到的 首先看一下它给的条件,考虑到完全二叉树的性质,就可以发现,如果给的邻居只有一个,说明是叶 ...