js获取输入框光标坐标

2024-11-03

JavaScript 获取输入时的光标位置及场景问题

前言在输入编辑的业务场景中,可能会需要在光标当前的位置或附近显示提示选项.比如社交评论中的@user功能,要确保提示的用户列表总是出现在@字符右下方,又或者是在自定义编辑器中 autocomplete 语法提示,都需要获取光标当前的位置作为参照点. 两种位置对于 WEB 开发来讲,当我们提到某某元素的位置,通常是指这个元素相对于父级或文档的像素单位坐标.而对于输入框中光标,就有了额外的区分. 相对于内容相对于内容,光标位于第几个字符之后,姑且称之为字符位置吧. 相对于UI 相对于UI,也就

js获取输入框中当前光标位置并在此位置插入字符串的方法(angularjs+ts)

一半是参照别人代码,一半是自己代码,略笨拙,如果有更好的方法希望分享. 获取当前光标位置的方法 getCaretPosition (obj:any) { //获取输入框中当前光标的位置,obj为此输入框 let $scope = this.$scope; let $log = this.$log; $scope.caretPosition = 0; if (document.selection) { obj.focus(); var oSel = document.selection.creat

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

<html> <head></head> <body> <script> function getTxt1CursorPosition(){ var oTxt1 = document.getElementById("txt1"); var cursurPosition=-1; if(oTxt1.selectionStart){//非IE浏览器 cursurPosition= oTxt1.selectionStart; }els

原生js获取鼠标坐标方法全面讲解-zmq

原生js获取鼠标坐标方法全面讲解:clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y 一.关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种:event.clientX/Yevent.pageX/Yevent.offsetX/Yevent.layerX/Yevent.screenX/Y 二.分别讲解如下: clientX/Y: clientX/Y获取到的是触发点相对浏览器可视区域左上角距离,不随页面滚动而改变兼容性:所有浏览器均支持 page

js获取光标位置

js获取光标位置 var TT = { /* * 获取光标位置 * @Method getCursorPosition * @param t element * @return number */ getCursorPosition:function(t){ if (document.selection) { t.focus(); var ds = document.selection; var range = ds.createRange(); var stored_range = ran

JS获取坐标

1.js获取对象的绝对坐标方法1: function getAbsPoint(e) { var x = e.offsetLeft, y = e.offsetTop; while(e=e.offsetParent) { x += e.offsetLeft; y += e.offsetTop; } alert("x:"+x+","+"y:"+y); } 方法2: function getAbsPoint(obj) { var x,y; oRect

js获取鼠标坐标位置兼容多个浏览器

这个是IE 11 下兼容下视图测试时可用. $(window).bind('beforeunload', function (event) { var _this = this; var x = event.originalEvent.clientX; var y = event.originalEvent.clientY; || event.altKey) { // alert("ok"); $.post("/admin/login/ClearSesssion",

js点击获取—通过JS获取图片的绝对对坐标位置

一.通过JS获取鼠标点击时图片的相对坐标位置源代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> .wrap{ width:300px; height: 200px; backgro

js点击获取—通过JS获取图片的相对坐标位置

一.通过JS获取鼠标点击时图片的相对坐标位置源代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>通过JS获取图片的相对坐标位置</title> <style> body {margin: 0; padding: 0; } #area{width:300px;height:300

js 获取元素坐标和鼠标点击坐标

js 获取元素的位置 var odiv=document.getElementById('divid'); alert(odiv.getBoundingClientRect().left); alert(odiv.getBoundingClientRect().top); js 获取点击时间鼠标坐标 event = event||window.event; //获得相对于body定位的横标值: x=event.clientX //获得相对于body定位的纵标值: y=event.clientY

js获取元素的页面坐标

一.DOM中各种宽度.高度二.DOM中的坐标系 JS获取div元素的宽度 offsetWidth=width+padding-left+padding-right+border-left+border-right,即offsetWidth描述的是元素的宽度,是指元素的宽度+内边距(左右两个)+边框(左右两个),不包括外边距和滚动条部分 offsetHeight=height+padding-top+padding-bottom+border-top+border-bottom,即offsetH

js实现在光标的位置添加内容

<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <body> <script type="text/javascript"> function setCaret(textObj) { if (textObj.createTextRange) {

控制input输入框光标的位置

一:理解input, textarea元素在标准浏览器下两个属性selectionStart, selectionEnd. selectionStart: 该属性的含义是选区开始的位置: selectionEnd: 选区结束的位置. 两个值默认都是为0. 注意: 该属性在chrome,safari和firefox都有用,标准浏览器下使用这两个属性. 我们先来看看如下代码,打印下如下可以看到: <!DOCTYPE html> <html> <head> <meta

JS常用正则表达式和JS控制输入框输入限制(数字、汉字、字符)

验证数字:^[0-9]*$验证n位的数字:^\d{n}$验证至少n位数字:^\d{n,}$验证m-n位的数字:^\d{m,n}$验证零和非零开头的数字:^(0|[1-9][0-9]*)$验证有两位小数的正实数:^[0-9]+(.[0-9]{2})?$验证有1-3位小数的正实数:^[0-9]+(.[0-9]{1,3})?$验证非零的正整数:^\+?[1-9][0-9]*$验证非零的负整数:^\-[1-9][0-9]*$验证非负整数(正整数 + 0) ^\d+$验证非正整数(负整数 + 0) ^((

JS 获取浏览器窗口大小

JS 获取浏览器窗口大小 <script> // 获取窗口宽度 if (windows.innerWidth) { winWidth = windows.innerWidth; } else if ((document.body) && (document.body.clientWidth)) { winWidth = document.body.clientWidth; } // 获取窗口高度 if (windows.innerHeight) { winHeight = wi

JS 获取浏览器和屏幕宽高等信息代码

JS 获取浏览器和屏幕宽高等信息. 网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWidth (包括边线的宽) 网页可见区域高:document.body.offsetHeight (包括边线的宽) 网页正文全文宽:document.body.scrollWidth 网页正文全文高:document.body.scrollHeight 网

js获取浏览器高度和宽度值,尽量的考虑了多浏览器。

js获取浏览器高度和宽度值,尽量的考虑了多浏览器. IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.documentElement.clientWidth ==> 可见区域宽度 document.documentElement.clientHeight ==> 可见区域高度 FireFox中: document.body.clientWidth

js获取浏览器基本信息：document.body.clientWidth/clientHeight/scrollWidth/scrollTop。（转）

js获取浏览器基本信息:document.body.clientWidth/clientHeight/scrollWidth/scrollTop. 分类: js.jquery.ext.js技术2011-07-28 17:20 6532人阅读评论(1) 收藏举报浏览器firefoxopera文档htmlie 网页可见区域宽:document.body.clientWidth网页可见区域高:document.body.clientHeight网页可见区域宽:document.body.offs

js鼠标及对象坐标控制属性详细解析

对js鼠标及对象坐标控制属性进行了详细的分析介绍. offsetTop获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算顶端位置. offsetLeft获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置.offsetHeight获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度.IE.Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框.NS.FF 认为 offsetHei

JS 获取浏览器窗口大小clientWidth、offsetWidth、scrollWidth

常用: JS 获取浏览器窗口大小 // 获取窗口宽度 if (windows.innerWidth) winWidth = windows.innerWidth; else if ((document.body) && (document.body.clientWidth)) winWidth = document.body.clientWidth; // 获取窗口高度 if (windows.innerHeight) winHeight = windows.innerHeight;

js格式化输入框内金额、银行卡号[转]

这篇文章主要介绍了js格式化输入框内金额.银行卡号,采用“keyup”事件处理格式化,每4位数一组中间空格隔开,如何格式化输入框内金额.银行卡号,需要了解的朋友可以参考一下我们在项目中经常遇到需要格式化的金额数和银行卡号,一般我们常见的有两种表现形式:输入框内格式化和输入框外格式化.这里我主要把我在项目中遇到的输入框内部格式化的,代码亮出来,框外的格式化相对简单一点. 页面代码: <div class="wrap"> <input type="text&q

js获取输入框光标坐标

热门专题