Question

我遇到的问题是Safari和Chrome。当您单击文本或输入框时，似乎有一个错误导致mouseup事件触发两次。我希望在框获得焦点时完全选择输入框中的文本（无论它是否被选中，单击或通过代码给出焦点）。如果你选中框或通过代码给它焦点它完美地工作。但是，如果单击该框，则会选择文本，直到松开鼠标按钮为止。然后立即取消选择文本。这是我正在使用的代码：

    <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，有什么方法吗？

Answer 1

这应该这样做：

<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尽可能彼此分离是一个好主意（但这不会导致您的示例中的问题）。< / p>

Answer 2

我找到了解决方案。我为输入框创建了事件监听器：

echo ' style="background-color: #7dbb4d;>"';

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

Chrome和Safari在mouseup上取消选择文本

2 个答案: