jquery - Catch only new value in text input

Question

I'm trying to create a JQuery method to tell me what the user writes in a text input. For example, if there's an input with the text foo and the user types in b I want to catch that. If the user types a afterwards, I want to catch only that a and not the ba.

How can I do that?

EDIT: I did it using this code:

$(".writetags").each(function(){
        var elem = $(this);
        elem.bind("keyup", function() {
            elem.data("oldVal", $(this).data("newVal") || "");
            elem.data("newVal", $(this).val());
            var oldVal = elem.data("oldVal");
            var newVal = $(this).val();
            console.log("Was "+oldVal+" is "+newVal);
            var newChar = newVal.charAt(newVal.length-1);
            var oldChar = oldVal.charAt(oldVal.length-1);
            console.log("The user just typed in "+newChar+" instead of "+oldChar);
        }); 
    });

just attach a function to the keypress event of the input element and get the pressed key from the event object — Nishad K Ahamed
– Nishad K Ahamed, Commented Jan 5, 2016 at 8:18
@FrebinFrancis but how would I detect the new character written in the input? — NonameSL
– NonameSL, Commented Jan 5, 2016 at 8:21

aitnasser · Accepted Answer · 2016-01-05 08:21:28Z

1

this is a generic code that listen for all text input Changes in your web page:

 $(document).ready(function() {
    $("input[type=text]").change(function() {
        $(this).data("oldVal", $(this).data("newVal") || "");
        $(this).data("newVal", $(this).val());
        console.log($(this).data("oldVal"));
        console.log($(this).data("newVal"));
    });
});

answered Jan 5, 2016 at 8:21

aitnasser

1,2661 gold badge9 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

NonameSL · Accepted Answer · 2016-01-05 08:43:26Z

1

Thanks everyone, but I managed to do it using this code:

$(".writetags").each(function(){
        var elem = $(this);
        elem.bind("keyup", function() {
            elem.data("oldVal", $(this).data("newVal") || "");
            elem.data("newVal", $(this).val());
            var oldVal = elem.data("oldVal");
            var newVal = $(this).val();
            console.log("Was "+oldVal+" is "+newVal);
            var newChar = newVal.charAt(newVal.length-1);
            var oldChar = oldVal.charAt(oldVal.length-1);
            console.log("The user just typed in "+newChar+" instead of "+oldChar);
        }); 
    });

answered Jan 5, 2016 at 8:43

NonameSL

1,49514 silver badges28 bronze badges

Comments

BenG · Accepted Answer · 2016-01-05 12:46:59Z

1

use the keyCode from the keypress event and use String.fromCharCode to get the character:-

$('input').keypress(function(event){
 var character = String.fromCharCode(event.which || event.charCode || event.keyCode);
 console.log(character);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" />

edited Jan 5, 2016 at 12:46

answered Jan 5, 2016 at 8:24

BenG

15.2k5 gold badges48 silver badges62 bronze badges

Collectives™ on Stack Overflow

jquery - Catch only new value in text input

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related