JavaScript 获取/设置光标位置,兼容Input&&TextArea

最新推荐文章于 2024-04-16 09:37:21 发布
最新推荐文章于 2024-04-16 09:37:21 发布
阅读量1.3k 收藏 2
点赞数
分类专栏： Javascript/jQuery 
<!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>JavaScript 获取/设置光标位置,兼容Input&&TextArea。</title> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<style> 
body { margin: 32px; font-family: Verdana, sans-serif; font-size: 13px; } 
.title { font-size: 18px; font-weight: bolder;margin:40px 0; } 
.input { width: 50%; font-family: Verdana, sans-serif; font-size: 13px; text-indent: 2px; } 
</style> 
<script> 
//获取光标位置 
//单行文本框 
function getPositionForInput(ctrl){ 
var CaretPos = 0; 
if (document.selection) { // IE Support 
ctrl.focus(); 
var Sel = document.selection.createRange(); 
Sel.moveStart('character', -ctrl.value.length); 
CaretPos = Sel.text.length; 
}else if(ctrl.selectionStart || ctrl.selectionStart == '0'){// Firefox support 
CaretPos = ctrl.selectionStart; 
} 
return (CaretPos); 
} 
//多行文本框 
function getPositionForTextArea(ctrl) { 
var CaretPos = 0; 
if(document.selection) {// IE Support 
ctrl.focus(); 
var Sel = document.selection.createRange(); 
var Sel2 = Sel.duplicate(); 
Sel2.moveToElementText(ctrl); 
var CaretPos = -1; 
while(Sel2.inRange(Sel)){ 
Sel2.moveStart('character'); 
CaretPos++; 
} 
}else if(ctrl.selectionStart || ctrl.selectionStart == '0'){// Firefox support 
CaretPos = ctrl.selectionStart; 
} 
return (CaretPos); 
} 
//设置光标位置函数 
function setCursorPosition(ctrl, pos){ 
if(ctrl.setSelectionRange){ 
ctrl.focus(); 
ctrl.setSelectionRange(pos,pos); 
} 
else if (ctrl.createTextRange) { 
var range = ctrl.createTextRange(); 
range.collapse(true); 
range.moveEnd('character', pos); 
range.moveStart('character', pos); 
range.select(); 
} 
} 
//test 
function process( id,targetId ){ 
var no = document.getElementById(id).value; 
setCursorPosition(document.getElementById(targetId),no); 
} 
</script> 
</head> 
<body> 
<div class="title">JavaScript 获取/设置光标位置,兼容Input&&TextArea：</div> 
<div class="title">单行文本框</div> 
<p><input class="input" id="textbox" name="textbox" value="Hi,www.jb51.net!!!" /></p> 


<input type="button" οnclick="alert( getPositionForInput( document.getElementById('textbox') ) )" value="Get Position"> 
输入位置: <input type="text" id="no1" size="1" /><input type="button" οnclick="process('no1','textbox');" value="Set Position"> 


<div class="title">多行文本框</div> 
<textarea id="zhangdanNum" name="zhangdanNum" style="height:66px;width:246px;overflow:hidden">Hi,CssRain!!!</textarea> 
<input type="button" οnclick="alert( getPositionForTextArea( document.getElementById('zhangdanNum') ) )" value="Get Position"> 
输入位置: <input type="text" id="no2" size="1" /><input type="button" οnclick="process('no2','zhangdanNum');" value="Set Position"> 
</body> 
</html>


beckjin
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
jQuery获取设置textarea中光标位置
02-24
jQuery扩展函数，用于获取设置textarea中光标位置
JavaScript 获取/设置光标位置,兼容Input&&TextArea
10-28
JavaScript 获取/设置光标位置,兼容Input&&TextArea：项目中遇到的问题，特此记录。
textarea 获取光标位置和设置光标位置
热门推荐
haogemr的博客
04-04 1万+
获取光标位置 //ctrl 是dom节点 function getCursortPosition (ctrl) { //获取光标位置函数 var CaretPos = 0; // IE Support if (document.selection) { ctrl.focus (); // 获取焦点 var Sel =...
textarea中定位光标位置_FIFA训练课 | 定位球技巧——直接任意球
weixin_39639600的博客
11-17 566
小伙伴们在游戏中经常可以得到定位球，通常情况下呢，大家对于定位球的处理，无外乎以下几种——蓄力，直接打一脚。不可否认这一脚打出去的确非常爽，不过更大概率就是要准备防对方反击了。战术任意球，传给队友，传几脚之后本来是一次上佳的进攻机会就变成阵地战了。那么，有没有什么更好的方法或者技巧，可以大家更高效地利用任意球制造威胁呢？有！小编近期无意间发现了一本秘籍，上面记录了FIFA ONLINE 4中定位球...
textarea中定位光标位置_【财务建模入门】01进行中-数据处理
weixin_39625987的博客
11-20 113
本文内容主要是对建模中的数据相关处理：设置数据显示、调用数据以及与数据相关的一些Excel工作。1.数据显示---------------在我们的模型中，数据是最重要的部分之一，其显示格式和样式就需要我们注意。明显表示不同类数据我们可以将模型中的数据大致分为三种情况：①输入的数据 ②需要计算的数据 ③计算输出的数据当然，数据可能多种情况会同时发生，但我们需要将不同情况加以区分，方便读者辨析。需要用...
Textarea-光标-有趣的实践
qq_36523196的博客
04-20 568
下面我是用ref的形式，获取到标签元素，再得到标签的selectionStart，selectionEnd这两个属性，分别代表光标的开始结束位置，在不进行鼠标批量选择时，这两个通常在一个位置。最近在项目开发中，遇到这样一个需求，在textarea中（这里我们用的ant-design）在光标处插入目标字符串，字符串类似于模板字符串格式，通过${}包裹。2、删除目标字符串时只能整体删除，例如删除目标字符串中一个字符，需要将整个目标字符串删除，通过鼠标进行范围选取时，要将有交集的目标字符串都删除。
JavaScript 获取/设置光标位置,兼容InputTextArea
12-02
在JavaScript中，获取和设置光标...以上就是关于JavaScript获取和设置`Input`和`TextArea`元素光标位置的详细解释，包括了兼容性处理的实现。这些方法能够帮助你在各种浏览器环境中控制用户的输入焦点，提升用户体验。
JavaScript获取,设置光标位置,兼容InputTextArea
12-21
在JavaScript编程中，获取和设置光标位置是常见的需求，特别是在与用户交互的表单元素如`<input>`和`<textarea>`中。这涉及到DOM（文档对象模型）操作和事件处理，对于创建动态和响应式的网页应用至关重要。本文将...
javascript textarea光标定位方法(兼容IE和FF)
10-28
在 textarea 中设置光标位置是一个常见的需求，特别是在用户交互场景中，如文本编辑、表单填写等。由于不同的浏览器对某些 API 的支持不同，因此我们需要编写兼容性的代码来处理这个问题。 对于 IE 浏览器，它提供...
js获取光标位置和设置文本框光标位置示例代码
10-26
在JavaScript中，获取和设置文本框（input[type="text"]）或文本域（textarea）的光标位置是一项常见的任务，特别是在实现用户交互功能时。在不同的浏览器中，处理光标位置的方法有所不同，主要分为IE浏览器和其他非...
JS获取及设置TextArea或input文本框选择文本位置的方法
10-24
主要介绍了JS获取及设置TextArea或input文本框选择文本位置的方法,涉及TextArea及input文本操作技巧,需要的朋友可以参考下
vue获取textarea 光标的位置并插入文字
shiLL123的博客
11-18 3043
vue不是用UI框架texteare html <textarea v-model="content" id="textarea" type="textarea" rows="2" autocomplete="off" style="width: 100%;height: 60px;"></textarea> <divstyle="margin-left: 30px;"> <ul v-for="(f,i) in friend_list"> <l
jquery 获取 设置光标插件（转载）
cwanglu的专栏
05-22 675
$.fn.extend({ setCaretPosition : function(pos) { // 设置光标 var ctrl = this[0]; if (ctrl.setSelectionRange) { ctrl.focus(); ctrl.setSelectionRange(pos, pos); } else if (ctrl.createTextRange) { var
探索技术创新：`textarea-caret-position` —— 精确控制文本输入框光标的神器
最新发布
gitblog_00071的博客
04-16 415
探索技术创新：textarea-caret-position —— 精确控制文本输入框光标的神器 项目地址:https://gitcode.com/component/textarea-caret-position 在Web开发中，我们常常需要对文本输入框（<textarea>）进行精细的操作，比如调整光标位置、实现自定义输入效果等。Textarea-caret-position 是一...
Javascript设置和获取Textarea的光标位置的方法
relucent的专栏
07-20 1111
&lt;html&gt;&lt;head&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=gb2312" /&gt; &lt;tit
react/antd实现textarea获取光标位置在光标处插入文字
a2469025185的博客
08-30 1万+
react/antd实现textarea获取光标位置在光标处插入文字 1.首先将textarea对象通过refs存起来 <TextArea ref={(input) => this.contentProps = input} placeholder="请输入" style={{ width:'600px' }} autos...
textarea文本域光标初始位置没有在最左上角的问题
落霞朝阳七千里，夏雨冬雪九万顷
08-02 6761
今天在写textarea文本域的时候，文本域中自动带出的内容没有居左上角显示，而且文本域光标初始位置也没有定位在左上角，网上查了好多方法，用style样式控制，试了好多居左的样式都没有解决问题，后来查到一篇，只要去掉两个标签内的空格，就可以居左上角显示了； 例： &lt;textarea name="name" rows="2" cols="20" id="txtValidPattern" c...
TextArea中定位光标位置
weixin_34261739的博客
08-21 715
原文:TextArea中定位光标位置    在项目中，遇到一个场景：希望能在TextArea中输入某条记录中的明细(明细较简单，没有附属信息，只用记录顺序和值即可，譬如用“+”号来作为明细分隔符：1+1.5+2+3.4)，如下图所示：     为了让输入更直观，需要在输入过程中，实时地显示汇总数量和合计；如果用户希望编辑文本中间的某条明细，也可以通过鼠标点击、或者键盘上的上下左右键来定位某个明...
textarea 改变光标位置
06-02
您可以使用 JavaScript 来改变 textarea 元素的光标位置，具体方法如下： 1. 首先获取 textarea 元素： ``` var textarea = document.querySelector('textarea'); ``` 2. 然后可以使用 `selectionStart` 和 `...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值