Chrome And Safari Deselecting Text On Mouseup

The problem I'm having is with Safari and Chrome. It appears there is a bug that causes the mouseup event to fire twice when you click on a text or input box. I want the text in th

Solution 1:

This should do it:

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

Here's a working demo using your code. Notice there needs to be 2 different functions and two different getElementByID parameters: 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><labelfor="x1">X1: </label><inputid="x1"type="text"name="x1"maxlength="6"size="5"onclick="myFunction()"><labelfor="y1">Y1: </label><inputid="y1"type="text"name="y1"maxlength="6"size="5"onclick="myFunction2()"></form>

Javascript:

<script>functionmyFunction() {
    document.getElementById("x1").select();
}

functionmyFunction2() {
    document.getElementById("y1").select();
}
</script>

As you may already know, it's a good idea to try to keep your HTML and JS as separated out from each other as possible (but that wasn't causing you the problem in your example).

Solution 2:

I found a solution. I created event listeners for the input boxes:

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

Now, when the input box is clicked, it is automatically selected. When the input box is tabbed into it is also automatically selected. Now I don't have to use the onFocus event to select the input box text. The onFocus event and onClick event were conflicting with each other in Safari and Chrome but not on Firefox, IE or Opera.