How can I run a javascript function when input changes

Question

When a user creates a new account on my website I want to check if the name already exists. I want this check to run when they leave the username input box and go to enter a password.

I tried :

<input type="text" onkeyup="check_user(this.value)"/>

no this is for register that if this user exist cannot submit whit this username. — mamrezo, Feb 03 '11 at 12:31
What you are looking for is the `blur` event. But @Awais provided an even better solution, as the `change` event will be raised, when the input looses focus, but only if the text changed. — Felix Kling, Feb 03 '11 at 12:41
possible duplicate of [Detect changed input text box](http://stackoverflow.com/questions/6153047/detect-changed-input-text-box) — azerafati, Oct 30 '14 at 17:19

score 23 · Answer 1 · edited Feb 03 '11 at 12:42

23

Call the function on the change event of text field:

<input name="username" onChange="check_user(this.value);" type="text"/>

edited Feb 03 '11 at 12:42

Felix Kling

795,719
175
1,089
1,143

answered Feb 03 '11 at 12:35

Awais Qarni

17,492
24
75
137

i did this but when switch between inputs by clicking on others or tab for switch function didnt respond! – mamrezo Feb 03 '11 at 12:39
are you calling function with correct spellings on all inputs> – Awais Qarni Feb 03 '11 at 12:41
1

+1, `change` is better than `blur` and the `input` needs indeed a `name`. – Felix Kling Feb 03 '11 at 12:45
Thanks Felix Kling agree with u – Awais Qarni Feb 03 '11 at 12:47
@mamrezo: Double check your code, it should work fine: http://jsfiddle.net/VNV5P/1/ – Felix Kling Feb 03 '11 at 12:47

score 14 · Accepted Answer · answered Feb 03 '11 at 12:40

14

You need to use the "onblur" event. It fires when a control loses its focus, which seems to be exactly what you need.

answered Feb 03 '11 at 12:40

Please treat your mods well.

4,321
1
25
35

score 13 · Answer 3 · answered Mar 11 '15 at 19:13

Because you used onkeyup in your code example, it sounds like you are looking to call a function on every keystroke. If that is the case, then instead of onchange - which fires when the input loses focus - you should use oninput which will fire anytime there is a change inside of input.

score 1 · Answer 4 · answered Feb 03 '11 at 12:34

1

I think you are looking for check the duplication of user. you have to write server side code for that.

answered Feb 03 '11 at 12:34

enthusiastic

732
2
9
18

i know this is an ajax work but instead of onkeyup what should i type? – mamrezo Feb 03 '11 at 12:37

Blaze612 YT · Answer 5 · 2021-04-15T23:03:39.657

If you want to fire when something specific is type into the window:

phr = 'lol'
ltr = phr.split('')
text = ''

document.addEventListener('keyup',function(k){
    if (ltr.includes(k.key)) {
        text += k.key
        if (text == phr) {
            console.log('Typed!')
            text = ''
        }
    } else {
        text = ''
    }})

As a function your can use it like:

function wtt(phrase,clb) {
    phr = phrase
    ltr = phr.split('')
    text = ''

    document.addEventListener('keyup',function(k){
        if (ltr.includes(k.key)) {
            text += k.key
            if (text == phr) {
                clb()
                text = ''
            }
        } else {
            text = ''
        }})
}

wtt('my phrase', function () {
    console.log('dostuff')
})

How can I run a javascript function when input changes

5 Answers5

Linked