Question

有没有办法检测用户点击的输入元素内容的位置？特别是在Firefox中？我需要知道插入符号的位置，以及当用户单击输入元素时插入符号的位置。我正在尝试修复firefox中的一个错误，用户无法点击将插入符号放入一个输入元素中，该输入元素具有＆＃39; .select（）＆＃39;调用它 - 插入符号没有出现在firefox中，所以我想尽可能手动放置它。

谢谢！

Answer 1

您可以通过阅读点击事件offsetX和offsetY来获取用户点击的像素位置（相对于输入字段）：

＆＃13;

// get the click position: 
document.getElementById('test').onclick = function(e) {
  console.log(e.offsetX, e.offsetY)
};

// for testing the 'select' issue:
document.getElementById('btn').onclick = function() {
  document.getElementById('test').select();
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="test">xxxxxx</textarea>

<button id="btn">Select</button>

＆＃13;

将其转换为所需的插入符号位置并不容易，因为它取决于字体大小和输入字段的文本内容。我能想到的最好的方法是做一些像textarea-caret-position中使用的技术，除了迭代textarea中每个可能的插入位置，找到最接近用户点击的位置。对于你想到的任务来说，这几乎肯定是矫枉过正的。

（对于它的价值，当前版本的firefox（v57）似乎没有任何麻烦正确放置插入符号是否选择了输入字段。我不确定这是否在以前的版本中就是这种情况。）

Answer 2

找到了问题的根源，一些不好的css已经在输入元素上设置了text-select为auto。将其更改为文本选择：文本允许我用于Safari的修复程序也可以在Firefox中使用。

如何检测用户单击的输入元素的位置

2 个答案: