【问题标题】：show cursor/caret at the beginning of input box在输入框的开头显示光标/插入符号
【发布时间】：2014-12-06 04:33:48
【问题描述】：

问题：我有一个带有一些文本的 html 文本输入框，当用户单击输入框时，我希望插入符号/光标出现在输入框的开头。

我可以使用 setSelectionRange() 函数移动插入符号，但我不喜欢这种效果然后将显示在文本输入框末尾的插入符号移到开头。我希望它出现在输入的开头。

HTML

<body>
    <input type="text" id="myP" onmousedown="mouseDown()" value="Mozilla" />
</body>

function mouseDown() {
    document.getElementById("myP").style.color = "green";
    document.getElementById("myP").setSelectionRange(0,0);
}

问题 1：

我使用 mousedown 事件来移动插入符号，但它根本不移动插入符号，如果我使用 onfocus 事件也会发生同样的事情。那是因为插入符号出现在这两个事件之后并且使 setSelectionRange 无效吗？

问题 2：

使用 javascript 解决我的问题的好方法是什么？注意：我不能使用占位符。

【问题讨论】：

标签： javascript html css

【解决方案1】：

Fiddle showing initial selection of text box

为此工作的要求：

必须能够将您的输入包装在 label（或实际上任何可以接受子节点的元素）中
Have to support pointer-events CSS property
您必须能够将触发事件从input 移动到label

HTML

<label for="myP" onclick="click();">
    <input type="text" id="myP" value="Mozilla" />
</label>

CSS

input#myP {
  pointer-events: none;
}

JavaScript

function click() {
    var input = document.getElementById("myP");
    input.style.pointerEvents = 'auto';
    input.style.color = "green";
    input.setSelectionRange(0,0);
    console.log('click');
}

在此实施中要考虑的重要事项：

您必须使用元素类型保护您的 CSS 选择器。在这种情况下，它是 input#myP 而不是 #myP。否则，如果指定了for 属性，CSS 将在某些浏览器中同时选择label 和input。
您必须为标签应用一些样式元素，否则这根本行不通。
点击时您的插入点将始终位于初始值之前。至少在 Chrome 中是这样。这是您的setSelectionRange 电话问题的一部分。我必须做一些研究才能弄清楚为什么会这样。

【讨论】：