Fiddle showing initial selection of text box

Question

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

我可以使用setSelectionRange（）函数移动一个插入符，但我不喜欢这个效果将文本输入框末尾显示的插入符号移到开头。我希望它显示在输入的开头。

HTML

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

JS

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

问题1 ：

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

问题 2：

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

Answer 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。否则，如果指定了label属性，CSS将在某些浏览器中同时选择input和for。
您必须将一些样式元素应用于标签，否则这根本不起作用。
点击后，您的插入点始终位于初始值之前。至少在Chrome中。这是您setSelectionRange电话问题的一部分。我必须做一些研究才能找出原因。

在输入框的开头显示光标/插入符号

1 个答案:

Fiddle showing initial selection of text box