文本框获取光标位置 ---- ctrl+enter换行
业务需求：按下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换行的更多相关文章
- C#.NET常见问题(FAQ)-如何把文本复制粘贴到文本框的光标位置
前面已经通过Clipborad.SetText之后,这里就要先把目标文本框的文本改成插入之后的值,然后修改光标所在位置
- 可编辑div中包含子元素时获取光标位置不准确的问题
前言: 高亮显示输入框中的关键字符,这就必须得用到可编辑div(或其他标签)元素了,这时我们需要获取光标的位置,以便插入字符. 正文: 正常情况下获取光标位置,代码如下: function getPo ...
- android EditText获取光标位置并安插字符删除字符
android EditText获取光标位置并插入字符删除字符1.获取光标位置int index = editText.getSelectionStart(); 2.在光标处插入字符int index ...
- Android EditText获取光标位置并插入字符删除字符
1.获取光标位置 int index = editText.getSelectionStart(); 2.在光标处插入字符 int index = editText.getSelectionStart ...
- js获取光标位置
js获取光标位置 var TT = { /* * 获取光标位置 * @Method getCursorPosition * @param t element * @return number */ ...
- Jquery获取下拉选择节点名称值赋给textbox文本框 获取 父节点的栏目名称编号
<label for="parentNode" style="float:left" >父级栏目:</label> <select ...
- Javascript实例技巧精选(7)—设置和获取文本框与文本域的光标位置（兼容IE和Chrome,Firefox）
>>点击这里下载完整html源码<< 截图如下: 本实例描述了如何用Javascript来控制和获取文本框/文本域的鼠标光标位置,以下代码兼容IE和Chrome,Firefox ...
- Silverlight中文本框添加回车事件后，换行无法清除的解决方法
在开发Silverlight的项目中,为了更好的用户体验,我们常要给一些控件添加一些快捷键.然而,在Silverlight中当用户回车提交后,光标停留在文本框的第二行怎么也清除不掉,经过一段时间研究, ...
- javastscript获取光标位置
需求是获取某元素的内容,然后将该内容插入到文本框当前的光标位置 (function($) { $.fn.extend({ insertAtCaret: function(myValue) { var ...
随机推荐
- ABP之框架体系
一 .框架体系的介绍 ABP框架采用的是DDD(领域驱动设计)的原则,可以很方便实现项目之间的松耦合,采用模块化的方式,方便对框架的扩展. 按照DDD的原则,首先将项目分为四层: 展现层:用来展现给用 ...
- Exception in thread "main" java.lang.StackOverflowError
总结:1.创建对象时,在父类构造方法new子类对象,这样会造成循环调用构造方法
- Git 使用篇二：搭建远程服务器
一般做一个私人的项目,不希望开源的,是不会放在GitHub上的,这个时候我们需要建里一个自己的Git远程服务器,方便小组成员开发. 这里以Centos云服务器为例: 第一步 如果自己的服务器没有git ...
- HDU 1686 - Oulipo - [KMP模板题]
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1686 Time Limit: 3000/1000 MS (Java/Others) Memory Li ...
- Kettle 4.2源码分析第三讲--Kettle 转换机制transformation介绍
转换机制 每个转换步骤都是ETL数据流里面的一个任务.转换步骤包括输入.处理和输出.输入步骤从外部数据源获取数据,例如文件或者数据库:处理步骤处理数据流,字段计算,流处理等,例如整合或者过滤.输出步骤 ...
- Linux free命令详解
前段时间有个项目的用C写的,性能测试时发现内存泄露问题.关于怎么观察内存使用问题,free是很好用的一个命令. 参数讲解 bash-3.00$ freetotal used f ...
- Win_Server_2008 安装 Oracle_11g EM时上载EM资料失败
此问题本人也遇到过.在网上找到了解决方案.下部分引用IT PUB. 安装oracle11g 64位.创建数据库到快结束的时候,报告说EM无法创建.emca_2010_06_13_11_05_36.lo ...
- a loosely strongly typed language
JavaScript: The Definitive Guide, Sixth Edition by David Flanagan As explained above, the following ...
- SVN里直接把本地目录纳入管理
如果本地有个已有的目录,要直接纳入SVN管理,怎么办呢?直接在Repository Browser里面 Add folder,但这样虽然把目录加到SVN,但本地目录没有纳入管理,你还要重新又下到本地才 ...
- 洛谷P4138 挂饰 背包
正解:背包dp 解题报告: 昂先放链接qwq 感觉还挺妙的,,,真的我觉得我直接做可能是想不到背包的,,,我大概想不出是个背包的QAQ 但是知道是背包之后觉得,哦,好像长得也确实挺背包的吼,而且其实是 ...