CODEWITHSUNDEEP
javascriptjqueryhtml
Rick
Rick

Reputation: 541

Jquery on keyup once

How to trigger another alert when I input some text on next time?
For example:
1. put some text
2. alert triggered
3. put some text again
4. alert trigger again

EDIT: I don't want to keep trigger the alert for every time i input, what i trying to do is... lets say I key in "abcd", the function should just trigger once. Then I click everywhere on the screen. Later, I key in "dddd" again in the textbox, the function trigger again for once

EDIT 2: Sry guys, maybe my requirement a bit confusing, i just edit the code and re-explain to illustrate my real case. So, first, i key in "abcd" on textbox, the tooltip should trigger once on first letter of "a". Then i click everywhere of the screen, the tooltip disappear. Next, I key in again "gfffee", the tooltip should appear again on first letter of "g".

<input type="text" id="test">
<input type="button" id="tool">


$('#test').one("keyup", function(){ 
    $('#tool').tooltip("show");
});

$('#tool').tooltip({
        placement: "bottom",
        trigger: "focus",
        title: "Click here",
    });

ANSWER:
Thanks everyone for helping me, I managed solve it based on combination of everyone answer. 

    count = 0;

    $('#test').on("change", function(){ 
        count = 0;
    });

    $('#test').on("keyup", function(){  

        if(count == 0)
        {
            $('#tool').tooltip("show");
            count = 1;
        }
    });

    $('#tool').tooltip({
        placement: "bottom",
        trigger: "focus",
        title: "Click here",
    });

  <input type="text" id="test">
  <input type="button" id="tool">

Upvotes: 1

Views: 2633

Answers (4)

Haze
Haze

Reputation: 196

Try this

var triggered = 0; // or false

$('#test').on('input', function() {
    if(triggered == 0) {
        alert('whatever message here');
        triggered++;
    }
});

$('#test').on('blur', function() {
    // reset the triggered value to 0
    triggered = 0;
});

Upvotes: 1

Dalin Huang
Dalin Huang

Reputation: 11342

on input clear the timer with clearTimeout(userTimer); then start new timer with setTimeout(doneType, maxTimer*1000); the maxTimer is in sec of your choose (2s here) if timeout call the function doneType

var userTimer;
var maxTimer = 2;

//on input, clear the timer and start new timer
$('#test').on('input', function () {
  clearTimeout(userTimer);
  userTimer = setTimeout(doneType, maxTimer*1000);
});

function doneType() {
  alert('keep type?');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" id="test">

Upvotes: 0

Erick T.
Erick T.

Reputation: 92

Can't you just use the onchange function? From your edit it seems like this would be more appropriate for your use case.

So 

$('#test').on("change", function(){ 
    alert("test");
});

Upvotes: 0

maazadeeb
maazadeeb

Reputation: 6112

I think there is no deterministic way to figure out when you are done with your input, using just the keyup event. But you can try debounce. I've added underscore.js to use debouce, but feel free to use your own implementation or another library. From the debounce docs of underscore

Useful for implementing behavior that should only happen after the input has stopped arriving

You can play around with the wait time to suit your needs. I've made it 500 ms

$('#test').on("keyup", _.debounce(function() {
  alert("test");
}, 500));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>

<input type="text" id="test">

An excellent explanation of debounce here

Alternate solution

Another possible solution is to attach a blur handler, which will execute if clicked outside your input

$("#test").on("blur", function(e) {
  alert("Test")
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<input type="text" id="test">

Upvotes: 0

Related Questions