How to Clear the Focus in JavaScript

How do you clear the focus in javascript?

Answer: document.activeElement

To do what you want, use document.activeElement.blur()

If you need to support Firefox 2, you can also use this:

function onElementFocused(e)
{
    if (e && e.target)
        document.activeElement = e.target == document ? null : e.target;
} 

if (document.addEventListener) 
    document.addEventListener("focus", onElementFocused, true);

Remove focus programmatically?

This might help...

http://api.jquery.com/blur/

$('#tabName').blur();

How to clear text input and re focus in JavaScript

Because setting the value of an input via javascript doesn't trigger it's input event.

You need to trigger its event manually after you set its value.

Here's the solution, notice the comments marked with FIX:

const subBtn = document.getElementById("btn");
const inptTxt = document.getElementById("text");
const contDiv = document.getElementById("container");

//check input box is empty or not and enable Colorize button
subBtn.disabled = true

// FIX: make a dedicated function for validation
function validateInput() {
    const value = inptTxt.value.trim()

    if (value) {
        inptTxt.dataset.state = 'valid'
        subBtn.disabled = false
    } else {
        inptTxt.dataset.state = 'invalid'
        subBtn.disabled = true
    }
}

// FIX: call the validation function when the input is changed
inptTxt.addEventListener('input', validateInput);

var xhttp = new XMLHttpRequest();

subBtn.addEventListener("click", function () {

    xhttp.onload = function () {
        var crd = document.createElement("div");
        var div = contDiv.getElementsByTagName("div");
        var crdCount = div.length;
        crd.setAttribute("id", "card" + crdCount);
        crd.innerHTML = inptTxt.value;

        //change html title with input text
        document.title = inptTxt.value;

        contDiv.appendChild(crd);
        document.getElementById("card" + crdCount).style.background = JSON.parse(this.responseText).color;

        //getting inverse value of hex color
        const inv = (hex) => '#' + hex.match(/[a-f0-9]{2}/ig).map(e => (255 - parseInt(e, 16) | 0).toString(16).replace(/^([a-f0-9])$/, '0$1')).join('')
        const invert = () =>
            document.querySelectorAll('circle')
                .forEach(c =>
                    (hex = c.getAttribute('fill')) &&
                    c.setAttribute('fill', inv(hex))
                )
        var invColor = inv(JSON.parse(this.responseText).color);

        //setting the inverse value to card text
        var crdText = document.getElementById("card" + crdCount).innerHTML;
        var setColor = "<span style='color:" + invColor + "'>" + crdText + "</span>";
        document.getElementById("card" + crdCount).innerHTML = setColor;

        //clear input and refocus
        inptTxt.value = "";
        inptTxt.focus();
        inptTxt.select();
        // FIX: call the validation function when the input is cleared
        validateInput();
    };

    xhttp.onerror = function () {
        var crd = document.createElement("div");
        var div = contDiv.getElementsByTagName("div");
        var crdCount = div.length;
        crd.setAttribute("id", "card" + crdCount);
        crd.innerHTML = inptTxt.value;

        //change html title with input text
        document.title = inptTxt.value;

        contDiv.appendChild(crd);
        document.getElementById("card" + crdCount).style.background = "#6d4298";

        var crdText = document.getElementById("card" + crdCount).innerHTML;
        var setColor = "<span style='color:#ffffff'>" + crdText + "</span>";
        document.getElementById("card" + crdCount).innerHTML = setColor;
    };

    xhttp.open("GET", "http://api.creativehandles.com/getRandomColor");
    xhttp.send();

})

//submit quote using Enter key
inptTxt.addEventListener("keyup", function (event) {
    if (event.keyCode === 13) {
        event.preventDefault();
        subBtn.click();
    }
});

Is it possible to remove the focus from a text input when a page loads?

A jQuery solution would be something like:

$(function () {
    $('input').blur();
});

Javascript Remove Focus on Enter Key Press

inorder to lose focuse from input when enter key is pressed , you should handle
key up event of input ,as shown below

function handleKeyUp(event) {
 //key code for enter
 if (event.keyCode === 13) {
   event.preventDefault();
   event.target.blur();
 }
}

now assign this function to on key up event of input box like this

<Input name="username" onKeyUp={handleKeyUp} />

now to clear focus of input on form submit ,
you can create refernce to both input as shown below

let userNameRef = React.createRef();
let passwordRef = React.createRef();

assign this to input as below

<Input ref={userNameRef} name="username" onKeyUp={handleKeyUp} />
 <Input.Password ref={passwordRef} name="password" />

use these reference to clear focus whenever you want as

userNameRef.current.blur();
passwordRef.current.blur();

EDITED
What difference does createref on the two fields have compared to using handlekeyup?

both works the same,
when an event triggered ,event.target is your target element,
while React provide way to access dom element with createRef,
there is no big difference with event.target and ref.current
but its is good to use reference as using reference you can access
element any where, no matter an event is occured or not

How to clear an input on focus the first time?

What you want is called a placeholder : a default value that is automatically removed.

If you can accept your placeholder being not visible for IE9- users, do this :

<input type="text" placeholder="username">

If you need to be compatible with IE9, use one of the many polyfills, people have taken care of the implementation details for you.

How to clear text field on focus of text field

To do this you will need to use a scripting language, probably javascript. Here an example

<input type='text' value'Some text' onclick='javascript: this.value = ""' />

Hope this helps.

Edit:

To meet what David is explain here is a second example in case that is what you are looking for

<script type='javascript'>
    var clear = true;
    function clear(obj)
    {
        if(clear)
        {
            obj.value = '';
            clear = false;
        }
    }
</script>

<input type='text' value'Some text' onfocus='clear(this);' />

---

Related Topics