有趣的js获取input标签中光标的索引

最新推荐文章于 2021-09-12 10:48:27 发布
最新推荐文章于 2021-09-12 10:48:27 发布
阅读量404 收藏 1
点赞数 1
原文链接：http://www.cnblogs.com/smart-girl/p/10596736.html
版权

先看动图如下，我们就可以很清楚的知道获取input标签中光标的索引的意思了。
1037363-20190325211615588-353305735.gif
由于IE支持document.selection，Firefox，Chrome,Safari以及Opera都有selectionStart和selectionEnd属性

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
</head>
<body>
    <script>
        function getTxt1CursorPosition(){
            var oTxt1 = document.getElementById("txt1");
            var cursurPosition=-1;
            if(oTxt1.selectionStart){//非IE浏览器
            cursurPosition= oTxt1.selectionStart;
            }else{//IE
            var range = document.selection.createRange();
            range.moveStart("character",-oTxt1.value.length);
            cursurPosition=range.text.length;
            }
            alert(cursurPosition);
        }
</script>
<input type="text" id="txt1" value="abcde" onclick="getTxt1CursorPosition()">

</body>
</html>

本文转载自：https://www.cnblogs.com/xiaoyang002/p/4055716.html

转载于:https://www.cnblogs.com/smart-girl/p/10596736.html

weixin_30379911
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js获取textarea或者input光标位置，控制光标位置
qq_33619285的博客
02-20 2719
<head> <meta charset="UTF-8"> <title></title> </head><body> <textarea name="text" rows="12" cols="28" id="select"></textarea> <!--<input type="text" name="select" id="select" />-->
js中 获取光标停留出的输入框中的内容
qq_39822451的博客
10-20 502
//输入框，鼠标停留后获取输入框的id $('input').focus(function(){ alert($(this).attr('id')); }); //获取鼠标所停留的输入框的id var x = $("input:focus").attr('id'); $("textarea:focus")//光标所在textarea元素的位置 ...
javascript获取光标位置以及设置光标位置
yiluoAK_47的专栏
05-02 3283
在项目开发中经常遇到input等设置光标位置到最后的问题，今天我查了一下Google，找到了在IE、Firefox、Opera等主流浏览器的获取光标位置（getCursortPosition）以及设置光标位置（setCursorPosition）的函数。 function getCursortPosition (ctrl) {//获取光标位置函数 var CaretPos = 0; /
js 获取输入框中光标的索引位置
weixin_30917213的博客
12-05 235
<html> <head></head> <body> <script> function getTxt1CursorPosition(){ var oTxt1 = document.getElementById("txt1"); var cursurPosition=-1; if(oTxt1...
在kindEditor中获取当前光标的位置索引的实现代码
10-28
由于KindEditor的编辑区域是在一个iframe内的body元素，而非传统的textarea或input元素，因此获取光标位置的方法与常规方法有所不同。 在KindEditor中，我们可以利用其内部API来获取当前光标的位置。关键在于`...
获取和设置文本框的光标位置
06-01
"获取和设置文本框的光标位置"这个主题就是关于如何在JavaScript和jQuery中实现这一功能的。 首先，我们要理解什么是光标位置。在文本框中，光标是用户输入文字时闪烁的标记，表示当前文字将被输入的位置。而选中...
JS获取文本框光标位置、选中起始位置、终止位置、选择内容
10-18
在JavaScript中，可以通过`element.selectionStart`属性来获取当前光标所在的位置。这个属性返回的是一个整数，表示用户在文本框中光标所在的字符索引。例如： ```javascript const input = document....
javascript控制在光标位置插入文字适合表情的插入
12-11
标题中的"javascript控制在光标位置插入文字适合表情的插入"描述了一种使用JavaScript实现的功能，即在文本框（textarea）的当前光标位置插入特定的文字或表情。这个功能常见于许多聊天应用或编辑器中，允许用户在...
获取和设置输入框光标位置的插件
10-29
"获取和设置输入框光标位置的插件"就是这样一个工具，它允许开发者方便地获取或设定文本输入框中的光标位置，从而提升应用的功能性和用户友好性。 首先，我们需要理解光标在输入框中的作用。光标是用户输入时的指示...
js 获取光标在文本框中的位置
08-01
js 获取光标在文本框中的位置 代码有注释。
Vue.js 关于v-for动态绑定v-model，并实时获取input输入值和索引
qq_40235879的博客
12-12 9492
如何动态绑定V-model 今天在尝试绑定的时候出来很多问题，而找了很多博客，描述的比较乱。 于是记录一下我的解决方法 动态绑定V-model <el-form> <el-form-item v-for="(item,index) in form" :key="index" :label="item.title"> ...
input 和 textarea，在进去页面，自动获取光标 ----- reactjs
brucehongsen的博客
09-12 1762
1. input 获取光标 import classNames from "classnames"; import React, { useEffect, useRef } from "react"; import { root } from "./index.module.scss"; export default function Input({ extra, onExtraClick, className, ...rest }) { /******************************
模拟京东按下s键输入内容2020/11/24
weixin_50286102的博客
11-24 261
模拟京东按下s键输入内容：. 核心思路： 检测用户是否按下了s 键，如果按下s 键，就把光标定位到搜索框里面 使用键盘事件对象里面的keyCode 判断用户按下的是否是s键 搜索框获得焦点： 使用 js 里面的 focus() 方法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=
JS获取文本框焦点光标位置、选中起始位置、终止位置、选择内容selectionStart、selectionEnd、cr
神zhi殇的博客
12-19 2371
参考：http://www.5imoban.net/jiaocheng/jquery/201808013373.html 基本的认识： 文本选中区域光标：页面中闪烁的光标其实就是特殊的宽度为0的选区。 简单理解就是选区的左右边界交叉形成了光标。 有了这个概念下面的内容就很好理解了。 文本选中 //选中所有文字 input.selectionStart = 0; //选中区域左边界 input....
普通input标签中的name与value和form:input标签中的path
u010343799的博客
06-14 1万+
1普通input标签中的name与value必须成对使用 就是名值对，比如一个公司的工资册，只有张三这个人名却没有对应张三的工资额，那发薪水时该发张三多少钱呢？同样，工资册上只写了个薪水额，却没有写是对应给哪个员工的也是没用的呀，呵呵。NAME就是用来做表单提交时分辨张三李四的；VALUE就是找到了张三李四以后要把他们的值带过去； 因此要传递参数，就必须是正确的名值对；为什么表单提交前通常要验证
JavaScript 中获取光标位置
越陌度阡
03-04 7931
1.概念和原理 DOM中并没有直接获取光标位置的方法，那么我们只能间接来获取光标位置。DOM支持获取光标选中的范围，我们可以以此为切入点，来获取或定位光标的位置，当选取范围起始点和结束点一样时，就是光标插入的位置。 1.1. 术语 anchor：选区起点。 focus：选区终点。 range：选区范围，包含整个节点或节点的一部分。 1.2. Selection Selection对象......
JS获取文本框焦点光标位置、选中起始位置、终止位置、选择内容
热门推荐
itdragons的博客
08-11 5万+
Demo：点击下载Dmo 参考文献： 最近在segmentfault上看到它的日期输入控件，感觉挺有意思。好吧，动手写一个，加到自己的代码库里吧。       然后问题来了，在上面图片中，我们很明显的看得出这里涉及光标位置的控制。比如说当我输入1993的3之后，光标必须要得插入到-中划线的下个输入点。       在网上找了找获取和设置光标位置的方法
JavaScript 获取输入时的光标位置及场景问题
Allec Cui的博客
03-26 7511
前言 在输入编辑的业务场景中，可能会需要在光标当前的位置或附近显示提示选项。 比如社交评论中的@user功能，要确保提示的用户列表总是出现在@字符右下方，又或者是在自定义编辑器中 autocomplete 语法提示，都需要获取光标当前的位置作为参照点。 两种位置 对于 WEB 开发来讲，当我们提到某某元素的位置，通常是指这个元素相对于父级或文档的像素单位坐标。而对于
unity TMP_Text设置鼠标光标，不使用Tmp_inputfield
最新发布
05-25
5. 使用 Input.compositionCursorPos 属性将光标位置设置为获取的字符索引。 以下是示例代码： ```csharp using UnityEngine; using UnityEngine.EventSystems; using TMPro; public class TMP_TextCursor : ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值