steam想申明库存量，不晓得在哪里去增设，那个出口处是稍稍有点儿深，由此可见毕竟也很单纯，一起来看一看什么样操作方式。操作方式方式01登入steam后，点选街道社区旁的对个人......
2024-02-05 549
js文本框获取设置文本内容光标位置
来源：互联网
2023-02-21 19:32:51 488
js设置光标在文本框input或textarea富文本（多行文本框）中的内容的下标位置操作，主要包括获取，设置。
工具/原料
- 电脑
- HTML编辑工具（txt文本也可以），谷歌浏览器
方法/步骤
第一步：打开HTML编辑工具编辑获取文本对象框中的代码：
!DOCTYPE html>
html>
head>
meta charset="UTF-8">
title>js操作input文本框中光标位置/title>
script>
//获取当前文本框中,下标所在的位置下标从0开始
function test1(){
var obj = document.getElementById("test");
alert(getCursortPosition(obj));
}
/**
* 获取当前光标位置
* @param ctrl
* @returns {number}
*/
function getCursortPosition(element) {
var CaretPos = 0;
if (document.selection) {//支持IE
element.focus();
var Sel = document.selection.createRange();
Sel.moveStart('character', -element.value.length);
CaretPos = Sel.text.length;
}
else if (element.selectionStart || element.selectionStart == '0')//支持firefox
CaretPos = element.selectionStart;
return (CaretPos);
}
/script>
/head>
body>
input type="text" value="0123456789" id="test"/>
button onclick="test()">测试/button>
输入过程中console.log(当前光标位置),鼠标弹起console.log(光标向前移动一位)/
/body>
/html>
第二步：测试获取input文本框中光标所在内容的位置。使用谷歌打开页面将光标放入文本框中3,4,5的位置分别得到其所在的文本光标位置。
第三步：打开编辑工具编辑设置光标在文本框中内容位置的代码。
!DOCTYPE html>
html>
head>
meta charset="UTF-8">
title>js操作input文本框中光标位置/title>
script>
//设置文本框中光标的位置
function test(){
var obj = document.getElementById("test");
var pos = parseInt(document.getElementById("num").value);
setCaretPosition(obj,pos);
}
/**
* 设置光标位置
* @param ctrl 需要设置对象
* @param pos 对象中内容的光标的所在位置小标从0开始
*/
function setCaretPosition(element, pos){
if(element.setSelectionRange)
{
element.focus();
element.setSelectionRange(pos,pos);
}
else if (element.createTextRange) {
var range = element.createTextRange();
range.collapse(true);
range.moveEnd('character', pos);
range.moveStart('character', pos);
range.select();
}
}
/script>
/head>
body>
设置下面光标的位置：input type="text" value="1" id="num" />button onclick="test()">测试/button>br />
input type="text" value="0123456789" id="test" />
/body>
/html>
第四步：测试设置input文本内容光标位置的代码。如下图
打开页面--将鼠标放到文本框对应的位置，然后点击测试获取当前光标所在文本的位置
第五步：编辑测试多行文本框获取光标位置的代码：
!DOCTYPE html>
html>
head>
meta charset="UTF-8">
title>js操作input文本框中光标位置/title>
script>
//获取当前多行文本框中,下标所在的位置下标从0开始
function test(){
var obj = document.getElementById("test");
alert(getCursortPosition(obj));
}
/**
* 获取当前光标位置
* @param ctrl
* @returns {number}
*/
function getCursortPosition(element) {
var CaretPos = 0;
if (document.selection) {//支持IE
element.focus();
var Sel = document.selection.createRange();
Sel.moveStart('character', -element.value.length);
CaretPos = Sel.text.length;
}
else if (element.selectionStart || element.selectionStart == '0')//支持firefox
CaretPos = element.selectionStart;
return (CaretPos);
}
/script>
/head>
body>
textarea id="test">0123456789/textarea>
button onclick="test()">测试/button>
/body>
/html>
第六步：测试内容主要测试了多行文本框3,4的位置。
第七步：编辑设置多行文本框中的内容的光标位置，编辑代码如下
!DOCTYPE html>
html>
head>
meta charset="UTF-8">
title>js操作input文本框中光标位置/title>
script>
//设置多行文本框中光标的位置
function test(){
var obj = document.getElementById("test");
var pos = parseInt(document.getElementById("num").value);
setCaretPosition(obj,pos);
}
/**
* 设置光标位置
* @param ctrl 需要设置对象
* @param pos 对象中内容的光标的所在位置小标从0开始
*/
function setCaretPosition(element, pos){
if(element.setSelectionRange)
{
element.focus();
element.setSelectionRange(pos,pos);
}
else if (element.createTextRange) {
var range = element.createTextRange();
range.collapse(true);
range.moveEnd('character', pos);
range.moveStart('character', pos);
range.select();
}
}
/script>
/head>
body>
设置下面光标的位置：input type="text" value="1" id="num" />button onclick="test()">测试/button>br />
textarea id="test">0123456789/textarea>
/body>
/html>
第八步：测试设置多行文本框中下标所在位置。如下图，设置光标位置的文本框中输入1和6两个框，点击测试框--》可以看到下面文本框光标位置变化。
注意事项
- 本次测试结果以谷歌浏览器为准。
以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！
上一篇：chrome如何更改主页 下一篇：bat批量修改文件名
相关文章
- 详细阅读
-
ps快捷键大全与常用快捷键-ps常用快捷键大全和技巧详细阅读
操作方式方法01【辅助widget】多种辅助工具相连接两个功能键的可同时按【Shift】加此功能键挑选出1、正方形、圆锥选框辅助工具 【M】 2、终端辅助工具 【V】 3、截叶......
2024-02-05 491
-
qq头像上传失败怎么办-qq头像上传失败1503详细阅读
操作方式01文档格式难题qq肖像最合适用jpeg文档格式的相片，若是相片有透明化地下通道，能选用png文档格式上载。 02大小不一难题若是相片极重也可能将引致上载失利，检......
2024-02-05 408