简体   繁体   English

JavaScript:从鼠标单击获取输入文本位置(以字符为单位)

[英]JavaScript: Get input text position (in chars) from mouse click

I have an HTML <input type="text"> or <textarea> with random existing text, say [12345678] or [12345 我有一个带有随机现有文本的HTML <input type="text"><textarea> ,比如[12345678]或[12345]
67890] 67890]
I have an arbitrary positioning mousedown click event inside this text. 我在这个文本中有一个任意定位的mousedown点击事件。 I need to convert the 2D mousedown click page coordinates into 1D character-based text coordinates, so as to position the caret properly by JS. 我需要将2D mousedown点击页面坐标转换为一维的基于字符的文本坐标,以便通过JS正确定位插入符号。 Obviously the browser has some function that is doing this conversion internally; 显然浏览器有一些内部进行此转换的功能; it would be nice to call this. 打电话给我会很高兴。 The input has a standard variable-width font, and could be at any level of magnification. 输入具有标准的可变宽度字体,并且可以处于任何放大级别。 The browser is restricted to FireFox. 浏览器仅限于FireFox。 We have JQuery and JCursor. 我们有JQuery和JCursor。

Background: The input field is dynamically generated inside deeply nested boxes, each having gnarly overloading. 背景:输入字段是在深层嵌套的框内动态生成的,每个框都有多余的重载。 The combination of legacy code with the newest FF implementation is somehow stealing the mousedown propagation/focus between the time it bubbles up out of the input element and the time it hits the default browser set-caret action, which is not happening. 遗留代码与最新的FF实现的组合以某种方式窃取了从输入元素冒出的时间到它到达默认浏览器set-caret动作的时间之间的mousedown传播/焦点,这是没有发生的。 I need to set the caret myself. 我需要自己设置插入符号。

a workaround for this example is to use the Level 2 stopPropagation() call on the event, while returning true (keep propagating) for the Level 0 onmousedown handler. 此示例的解决方法是对事件使用Level 2 stopPropagation()调用,同时为Level 0 onmousedown处理程序返回true(保持传播)。 This circumvents further Level 2 calls in bubbling up [into the parent structures' legacy code], while still ensuring that native default actions [placing the caret] actually do happen after the bubble-up phase. 这样可以避免进一步激活[进入父结构的遗留代码]的2级调用,同时仍然确保在冒泡阶段之后实际执行本地默认操作[放置插入符号]。 However, it still does not answer the original question, which has other applications. 但是,它仍然没有回答原始问题,其中有其他应用程序。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM