问题描述：

问题：我有它的一些文本的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：

我用鼠标按下事件来移动插入符号，但它不根本就移动插入符号，同样的t如果我使用onfocus事件，则会发生兴奋。那是因为插入符号出现在这两个事件之后，并且setSelectionRange没有效果吗？

问题 2：

什么用JavaScript解决我的问题的好办法？注意：我无法使用占位符。

此

答

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的问题的一部分。我必须做一些研究才能找出原因。

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

Fiddle showing initial selection of text box

相关推荐