先看动图如下，我们就可以很清楚的知道获取input标签中光标的索引的意思了。



由于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

有趣的js获取input标签中光标的索引的更多相关文章

  1. javascript笔记——js获取input标签中光标的索引

    出处:http://www.cnblogs.com/MrZouJian/p/5850553.html function getTxt1CursorPosition(){ var oTxt1 = doc ...

  2. 网站开发进阶(十八)js获取html标签中的值

    js获取html标签中的值 项目开发过程中,由于需求所迫,需要获取html标签元素中的内容,下面做一简单总结.以下所讲的示例适用于其它标签元素. 主要包括2中方法获取元素内容: 方法一:.innerT ...

  3. JQ和Js获取span标签的内容

    JQ和Js获取span标签的内容 html: 1 <span id="content">‘我是span标签的内容’</span> javascript获取: ...

  4. js 获取input type="file" 选择的文件大小、文件名称、上次修改时间、类型等信息

    文件名的传递 ---全路径获取 $('#file').change(function(){ $('#em').text($('#file').val()); }); 文件名的传递 ---只获取文件名 ...

  5. js获取input上传文件名和后缀

    var file = $("#filedata").val(); var pos = file.lastIndexOf("\\");  var filename ...

  6. 使用JS获取input值

    获取input值,设置input值 可以使用 $(".class") $("#id") $("input[name='name']") re ...

  7. 如何获取Input标签自定义属性的值?

    HTML代码: <input type="hidden" value="${Name?if_exists}" id='ID' busCode = &quo ...

  8. js 获取输入框中光标的索引位置

    <html> <head></head> <body> <script> function getTxt1CursorPosition(){ ...

  9. 获取input标签的所有属性

    1.用jquery$("input[name='btnAdd']").attr("value") 获取value属性值,其它属性换attr的参数就OK 例1: ...

随机推荐

  1. 虚拟机的ip地址为什么会发生变化

    因为虚拟机在NAT模式下由Vmware8虚拟网卡提供虚拟机的IP分配,网桥模式下由Vmware1来提供IP分配.它们都相当于 一个小型的DHCP服务器,除非改动虚拟机的网络连接方式,或动了虚拟网卡服务 ...

  2. input & collapse & tags

    input & collapse & tags https://ant.design/components/tag-cn/ https://www.iviewui.com/compon ...

  3. adoquery.refresh和adoquery.query的区别

    大的区别没有 1: requery是通过重新发出原始命令并再次检索数据,可使用 Requery 方法刷新来自数据源的 Recordset 对象的全部内容.调用该方法等于相继调用 Close 和 Ope ...

  4. Nintex Workflow Get Attachment link

    不多解释,直接上图,操作简单

  5. 洛谷P3389 【模板】高斯消元法

    P3389 [模板]高斯消元法 题目背景 Gauss消元 题目描述 给定一个线性方程组,对其求解 输入输出格式 输入格式: 第一行,一个正整数 n 第二至 n+1行,每行 n+1 个整数,为a1​,a ...

  6. servlet篇 之 访问形式

    get方式访问和post方式访问: get/post区别? 1) 参数传递 查询字符串(的形式)! get  url?key1=value&key2=value 2) http协议 请求报文包 ...

  7. Go For It ，一个灵活的待办事项列表程序

    导读 Go For It,是我们开源工具系列中的第十个工具,它将使你在 2019 年更高效,它在 Todo.txt 系统的基础上构建,以帮助你完成更多工作. 每年年初似乎都有疯狂的冲动想提高工作效率. ...

  8. 彻底弄懂 HTTP 缓存机制及原理 | 干货

    来源:www.cnblogs.com/chenqf/p/6386163.html 前言 Http 缓存机制作为 web 性能优化的重要手段,对于从事 Web 开发的同学们来说,应该是知识体系库中的一个 ...

  9. Eclipse环境配置与快捷命令

    1.VS.Chrome.Eclipse调试命令对比: VS: F5: 继续运行 F10: 单步执行 F11: 进入函数内部 Shift + F11: 由函数内部返回调用处 Chrome: F8: 继续 ...

  10. 大学jsp实验4include，forword

    一.实验目的与要求 1.掌握常用JSP动作标记的使用. 二.实验内容 1.include动作标记的使用 编写一个名为shiyan4_1.jsp的JSP页面,页面内容自定,但要求使用include动作标 ...