Chrome和Safari在鼠标上取消选择文本

Chrome and Safari deselecting text on mouseup

本文关键字：取消 选择 文本 鼠标 Safari Chrome      更新时间：2023-09-26

我遇到的问题是Safari和Chrome。似乎有一个错误，当您单击文本或输入框时，会导致鼠标up事件触发两次。我希望当输入框获得焦点时，输入框中的文本完全被选中(无论它是被选中、单击还是通过代码获得焦点)。如果你选择框或通过代码给它的焦点，它的工作完美。但是，如果单击该框，文本将被选中，直到松开鼠标按钮。然后文本立即被取消选中。下面是我使用的代码:

    <h1>Slope Intercept Form</h1>
    <form>
        <p>Enter the beginning X and Y coordinates for your line.</p>
        <label for="x1">X1: </label>
        <input id="x1" type="text" name="x1" maxlength="6" size="5"
            onfocus="this.setSelectionRange(0,this.value.length)"
            onblur="message(this.name, this.value)">
        <label for="y1">Y1: </label>
        <input id="y1" type="text" name="y1" maxlength="6" size="5" 
            onfocus="this.setSelectionRange(0,this.value.length)"
            onblur="message(this.name, this.value)">
    </form>

是否有任何方法围绕这个Chrome和Safari?

应该这样做:

<input type="text" id="myText" value="Mickey" onclick="myFunction()">
<script>
function myFunction() {
    document.getElementById("myText").select();
}
</script>

下面是使用您的代码的工作演示。注意，这里需要2个不同的函数和两个不同的getElementByID参数:http://codepen.io/anon/pen/pJXLro

HTML: 

<h1>Slope Intercept Form</h1>
    <form>
        <p>Enter the beginning X and Y coordinates for your line.</p>
        <label for="x1">X1: </label>
        <input id="x1" type="text" name="x1" maxlength="6" size="5" onclick="myFunction()">
        <label for="y1">Y1: </label>
        <input id="y1" type="text" name="y1" maxlength="6" size="5" onclick="myFunction2()">
    </form>
Javascript: 

<script>
function myFunction() {
    document.getElementById("x1").select();
}
function myFunction2() {
    document.getElementById("y1").select();
}
</script>

正如你可能已经知道的，这是一个好主意，尽量保持你的HTML和JS彼此分开(但这并没有导致你在你的例子中的问题)。

我找到了一个解决方案。我为输入框创建了事件侦听器:

document.getElementById("x1").addEventListener("click", function() {document.getElementById("x1").select();});
document.getElementById("y1").addEventListener("click", function() {document.getElementById("y1").select();});

现在，当点击输入框时，它被自动选中。当输入框被选中时，它也会被自动选中。现在我不需要使用onFocus事件来选择输入框文本。onFocus事件和onClick事件在Safari和Chrome中相互冲突，但在Firefox, IE或Opera中没有冲突。

相关文章：