javascript add two multipleevents on input field

Question

I am trying to add two events on input field like onkeyup and onchange, the purpose is to avoid longpress of characters other than numbers..as the field is for zipcode. At present only one event is working either keypress/onchange. I am adding my code for refrence any help would be appreciated.

function zipchange(obj, selector){
    var code = obj.value;
    var isnum = /^\d+$/.test(code);
  if(!isnum)
  obj.value="";    
}//onchange
function autoZip(obj, selector){
    var code = obj.value;
    if(code.match(/\D/gi))
        obj.value = code.replace(/\D/gi,'');
    if(code.length>4 && code.indexOf('-')== -1){
        var substr = code.substring(4);
        substr=substr.replace(/\D/gi,'');
        obj.value = code.substring(0,4)+'-'+substr;
    }//onkeypress
//html
 <input id="pincode" type="text" data-validate="validate[required]" name="address.pinCode" required="true" onkeyup="autoZip(this)" onchange="zipchange(this)" msg="Enter valid zip code" />

Answer:

function autoZip(obj, selector){
    var code = obj.value;
    if(code.match(/\D/gi))
        obj.value = code.replace(/\D/gi,'');
    if(code.length>4 && code.indexOf('-')== -1){
        var substr = code.substring(4);
        substr=substr.replace(/\D/gi,'');
        var substr1 = code.substring(0,4);
        obj.value = substr1+'-'+substr;
        var isnum = /^\d+$/.test(substr1)
        if(!isnum)
        obj.value="";    
    }

Hi the above modified function did the trick..thanks for all the enlightned ones who helped me..

Also if you can "afford" it you could use HTML5s inbuild validation features for that. — LJᛃ
– LJᛃ, Commented Feb 6, 2014 at 4:36
@LJ_1102 how is to define inbuild validation would u give thought to start.. — codebreaker
– codebreaker, Commented Feb 6, 2014 at 4:39
Have you thought about add the events in the JS and not in the HTML addEvent(document.getElementById('myinput'), 'paste', function(event) { alert('You pasted some text'); }); webmonkey.com/2010/02/javascript_events/… inkling.com/read/javascript-definitive-guide-david-flanagan-6th/… — CubanAzcuy
– CubanAzcuy, Commented Feb 6, 2014 at 4:39

sanjeev · Accepted Answer · 2014-02-06 04:49:25Z

2

Well first of all onchange is triggered when you change the content of the text-box and when you loose focus from input type

Hence there is no use in using onchange event you have to implement your onchange logic in keyup event

answered Feb 6, 2014 at 4:49

sanjeev

4,6512 gold badges22 silver badges28 bronze badges

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

4 Comments

codebreaker Over a year ago

I am trying the same way but problem occurs when the value entered is less than > 4 an <8 characters here i include a hypen while adding this to string then value stays there and its removed only after entering another character..

CubanAzcuy Over a year ago

It was my belief that onchange happened when the text-box changed value from the last time it was focused :-/. When a key is pressed in the field the event will be thrown and then again once the person has exited the text-box with data different from when they entered it the state it was before it was focus to its current state after losing focus. The test I made shows the behavior I describe as well. Can you post a link?

CubanAzcuy Over a year ago

@sanjeev :-p I get it just use the onkeyup as the function will be called on each keypress. You don't have to call the function again. DUH I can't read tonight. Sorry.

codebreaker Over a year ago

@CubanAzcuy and sanjeev thank u for ur value inputs that made me solve this riddle..

Collectives™ on Stack Overflow

javascript add two multipleevents on input field

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related