3

How do I remove the focus of a TextBox in JQuery?

Edit: This is the solution I was looking for:

$(this).trigger('blur');

For an unknown reason, $(this).blur(); did not work. I created a new, clear solution and then it worked.

Kohnarik
  • 377
  • 2
  • 5
  • 19
  • 1
    What's the point of this? If you blur the field when it's clicked on it can never be edited. You might as well just use `readonly`. – Rory McCrossan Jan 19 '16 at 09:54
  • This really really sounds like a [XY problem](http://meta.stackexchange.com/questions/66377/what-is-the-xy-problem) – A. Wolff Jan 19 '16 at 10:00
  • @RoryMcCrossan I simplified my question to leave out irrelevant stuff. Naturally, I won't clear the textbox and then just remove the focus, but I wanted to know how to remove the focus programmatically. – Kohnarik Jan 19 '16 at 10:01
  • @Kohnarik But there are many dupes regarding this already. `I've seen the .blur()` So you should have just tested it. And `$(this).trigger('blur');` is the same as `$(this).blur();`, so really doesn't make sense – A. Wolff Jan 19 '16 at 10:03
  • Your edit makes no sense - `$obj.blur()` and `$obj.trigger('blur')` are *exactly* the same under the hood. – Rory McCrossan Jan 19 '16 at 10:04
  • @A.Wolff I have rephrased my question. I have tested .blur() and this function does not do what I want. I have the solution now and I added it to my question. – Kohnarik Jan 19 '16 at 10:04
  • 1
    @Kohnarik `I have tested .blur() and this function does not do what I want` That's not possible then... Just provide MCVE and i will upvote this question BUT i'm sure you couldn't replicate it. And btw here, you are just misleading any futur readers – A. Wolff Jan 19 '16 at 10:04
  • @RoryMcCrossan Well, I don't know much about JQuery but a simple test made it clear for me that blur() does nothing, while trigger('blur') worked. – Kohnarik Jan 19 '16 at 10:05
  • It really should do, but we're unable to help you effectively as you're spoon-feeding very little information. – Rory McCrossan Jan 19 '16 at 10:05
  • @RoryMcCrossan Sorry for that. In the end, I received a functioning solution. Thank you for trying to help me, though. – Kohnarik Jan 19 '16 at 10:07
  • @A.Wolff I edited my question once more. I can't replicate the error, but after creating a new solution and using it there, it does indeed work. – Kohnarik Jan 19 '16 at 10:10
  • 1
    @Kohnarik Maybe you had a browser cache issue or maybe you weren't actually using `$(this).blur()` but passing anything to it making it not trigger the blur behaviour, e.g this would failed: `$(this).blur({});`. Oh and anyway, what you really want is `this.blur();` – A. Wolff Jan 19 '16 at 10:12
  • @A.Wolff I rebuilt my solution and blur() works in my main project now as well. Thank you for your patience & help. – Kohnarik Jan 19 '16 at 10:13

4 Answers4

6

JS Fiddle

$(function () {
    $('input[type=text]').focus(function () {
        $(this).val('');
        // add the below line to trigger the blur event
        $(this).trigger('blur'); 
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<input type="text" value="abcdef">
Mi-Creativity
  • 9,554
  • 10
  • 38
  • 47
3

you can force it to blur using trigger function

$("...").trigger("blur");
Emad Armoun
  • 1,625
  • 2
  • 19
  • 32
2

$(this).blur(); will do the trick. JSFiddle

The F
  • 3,647
  • 1
  • 20
  • 28
2

Use .blur().

Bind an event handler to the "blur" JavaScript event, or trigger that event on an element.

$(this).trigger('blur');
Tal
  • 1,091
  • 12
  • 25