前言 在输入编辑的业务场景中,可能会需要在光标当前的位置或附近显示提示选项.比如社交评论中的@user功能,要确保提示的用户列表总是出现在@字符右下方,又或者是在自定义编辑器中 autocomplete 语法提示,都需要获取光标当前的位置作为参照点. 两种位置 对于 WEB 开发来讲,当我们提到某某元素的位置,通常是指这个元素相对于父级或文档的像素单位坐标.而对于输入框中光标,就有了额外的区分. 相对于内容 相对于内容,光标位于第几个字符之后,姑且称之为字符位置吧. 相对于UI 相对于UI,也就…
一半是参照别人代码,一半是自己代码,略笨拙,如果有更好的方法希望分享. 获取当前光标位置的方法 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…
在Javascript中可以使用OuterWidth,OuterHeight 获取浏览器的大小.用 innerWidth,innerHeight 来获取窗口的大小(除去浏览器边框部分).对于IE6 及之前版本,要区分是标准模式,还是混杂模式.标准模式使用document.documentElement.clientWidth,document.documentElement.clientHeight:混杂模式使用document.body 的clientWidth,clientHeight. (…
function getScrollTop() { var scrollPos; if (window.pageYOffset) { scrollPos = window.pageYOffset; }else if (document.compatMode && document.compatMode != 'BackCompat') { scrollPos = document.documentElement.scrollTop; } else if (document.body) {…
(function ($, undefined) { $.fn.getCursorPosition = function () { var el = $(this).get(0); var pos = 0; if ('selectionStart' in el) { pos = el.selectionStart; } else if ('selection' in document) { el.focus(); var Sel = document.selection.createRange(…
请到简书中看,地址: http://www.jianshu.com/p/19a507cd5fd7 github测试例子 https://github.com/Stevenzwzhai/plugs/tree/master/selection-%E5%8F%AF%E7%BC%96%E8%BE%91%E5%8C%BA%E5%85%89%E6%A0%87%E4%BD%8D%E7%BD%AE…
在css中如果我们定义了input高度在输入时会发现光标位置靠上了不在居中了,在Chrome浏览器中,当设置了line-height时,input无文字,光标高度与line-height一致:input有文字,光标高度从input顶部到文字底部.当没有设置line-height时,则是与font-size一致. 想让光标居中的解决方案是:让input的高度等于里面文字的高度,然后用padding把框撑起来,这样光标的高度和位置就固定了. 如: input{     height: 14px;  …
文本框(TextBox)中的鼠标位置和光标位置是两个不同的概念,鼠标位置是要点击鼠标后(NouseDown)获取到,而光标位置却是实时就要获取到,也就是用户输入一个字符(KeyUp),这个位置就要改变一次,不需要鼠标的任何操作的. 下面代码能同时获取鼠标和光标位置,这里的"位置"指的是在字符串中的第几个. 需要在窗体上加上一个文本框(textBox1),还要绑定textBox1_KeyUp和textBox1_MouseDown事件. 要想实现鼠标点击或按键后光标位置获取,可用时使用下列…
一. 获取光标位置: // 获取光标位置 function getCursortPosition (textDom) { var cursorPos = 0; if (document.selection) { // IE Support textDom.focus (); var selectRange = document.selection.createRange(); selectRange.moveStart ('character', -textDom.value.length);…
>>点击这里下载完整html源码<< 截图如下: 本实例描述了如何用Javascript来控制和获取文本框/文本域的鼠标光标位置,以下代码兼容IE和Chrome,Firefox <script type="text/javascript"> function getTxt1CursorPosition(){ var oTxt1 = document.getElementById("txt1"); var cursurPositio…