javascript - 单击时移动文本插入点(插入符号)
问题描述
为了通过在我的表单中捕获未点击来增强用户体验,我在每个文本字段周围的边界框上使用以下代码:
focusMethod = function getFocus() {
document.getElementById("myTextField").focus();
}
这在将焦点设置在距用户单击的最近的文本字段上时效果很好,即使不是直接在文本字段本身上也是如此。但是,文本插入点(插入符号)总是自动放置在输入的左侧,而不是输入的最近的 x 点。
使用 vanilla JS,我怎样才能更进一步,找到文本插入点(插入符号)并将其移动到最接近用户单击的位置(假设该字段中有文本)?
解决方案
你可以做到这一点。我已经做了一些可以作为起点的东西:
<div id="container">
<input type="text" id="input">
<br>
<br>
</div>
<script type="text/javascript">
var testInput = document.getElementById("input");
var testContainer = document.getElementById("container");
document.getElementById("container").addEventListener("click", function(event) {
testInput.focus();
var padding = 0;
console.log(event.clientX);
console.log(testInput.getBoundingClientRect().left);
console.log(testInput.getBoundingClientRect().right);
if (event.clientX > testInput.getBoundingClientRect().right) padding = (testInput.getBoundingClientRect().right * 0.8);
else if (event.clientX > testInput.getBoundingClientRect().left) padding = (event.clientX - testInput.getBoundingClientRect().left);
testInput.style["padding-left"] = padding + "px";
});
</script>
和
#container {
width: 90%;
margin: auto;
background-color: gray;
}
#input {
width: 80%;
margin-top: 100px;
margin-left: 10%;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
见:https ://jsfiddle.net/mLqj17xe/1/
这个想法是找出光标应该在哪里并将其用作padding-left。
推荐阅读
- java - 使用 Java 和 Google 的 Firestore 运行查询时没有输出
- python - Pycharm 与另一个版本一起运行
- python - Python获取CSV中第一列的总和到Pandas DF
- python - 在 python 的 __str__ 方法中使用布尔表达式
- python - 面向对象编程 - 通过参数迭代
- java - 如何修复类的 addToCart 方法?
- javascript - jQuery循环遍历字符串计算字符串值的百分比折扣
- google-cloud-storage - Google Cloud Storage - 传输文件停止
- c++ - LCOV 只为头文件生成覆盖率报告
- c++ - 相似类型类的设计