jQuery Remove Focus from TextBox / Text Field Example

By: Suresh Dasari Jun 1, 2016

Introduction:

Here I will explain how to use jQuery to remove focus from text field with example or remove focus from textbox using jQuery or remove focus from input field with jQuery. In jQuery by using blur() property we can remove focus from input textbox field.

Description:

In previous articles I explained jQuery set focus on first textbox during page load, jQuery change textbox background color on focus, JavaScript move cursor to next field automatically once text full, JavaScript Onclick select all text from textbox / textarea, jQuery show / hide div on scroll example, jQuery show / hide div when checkbox is checked (selected), jQuery show / hide / toggle div example, jQuery show images in 360 degree view plugins and many articles relating to css, AngularJS, jQuery, JavaScript and asp.net. Now I will explain how to remove focus from input textbox field in jQuery with example.

To remove focus from textbox / text field in jQuery we need to write the code like as shown below

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

Here if you observe above syntax we are removing focus from textbox using blur() property.

If you want to check it in complete example you need to write the code like as shown below

<head>

<title>jQuery Remove Focus From Text Field Example</title>

$(function(){

$('#txtname').focus()

$('#btnRemove').click(function(){

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

})

</script>

</head>

<body>

<div>

Enter Name: <input type="text" id="txtname" />

</div>

</form>

</body>

</html>

Live Demo

Check following live demo to remove focus from textbox in jQuery. To remove focus from textbox just click on button automatically it will remove focus from text field.

Enter Name: