HOW TO CALL A FUNCTION ON TEXTCHANGE IN TEXTFIELD USING JAVA SCRIPT

jacob rasel

Total Post:88

Points:616
Posted by  jacob rasel
 1362  View(s)
Ratings:
Rate this:
Hi Mindstickians!

I have textfiedl on which i am calling a function which is given below but problem is that it is working on enter but not working on keyup or as the value 

of textfield changes i want to call this method.

Javascript:

$(function() {

    var input = $('.input'),
        bar = $('.bar'),
        bw = bar.width(),
        percent = bar.find('.percent'),
        ps = percent.find('span');

    input.on('keydown', function(e) {
        if (e.keyCode == 13) {
            var t = $(this),
                val = t.val();
            if (val >= 0 && val <= 100) {
                var w = 100 - val,
                    pw = (bw * w) / 100,
                    pa = {
                        height: w + '%'
                    },
                    cw = (bw - pw) / 2,
                    ca = {
                        left: cw
                    }
                ps.animate(pa);
                cs.text(val + '%');
                circle.animate(ca, function () {
                    circle.removeClass(name)
                }).addClass(name);
            } else {
                alert('range: 0 - 100');
                t.val('');
            }
        }
    });

});
Html:

<div class="text">
    <input type="text" class="input" value="0" id="sliderValue170h" />
</div>

Thank in advance!
  1. AVADHESH PATEL

    Post:604

    Points:4228
    Re: how to call a function on textchange in textfield using java script

    Hi Jacob!

    just add change to the function that it works for both keydown and change:

    $(function() {

    var input = $('.input'),
        bar = $('.bar'),
        bw = bar.width(),
        percent = bar.find('.percent'),
        ps = percent.find('span');

    input.on('keydown change', function(e) { // in here it works for both keydown and change
        if (e.keyCode == 13) {
            var t = $(this),
                val = t.val();
            if (val >= 0 && val <= 100) {
                var w = 100 - val,
                    pw = (bw * w) / 100,
                    pa = {
                        height: w + '%'
                    },
                    cw = (bw - pw) / 2,
                    ca = {
                        left: cw
                    }
                ps.animate(pa);
                cs.text(val + '%');
                circle.animate(ca, function () {
                    circle.removeClass(name)
                }).addClass(name);
            } else {
                alert('range: 0 - 100');
                t.val('');
            }
        }
    });

  1. Vijay Shukla

    Post:100

    Points:700
    Re: how to call a function on textchange in textfield using java script

    Hi Jacob!

    you can use onkeypress event like this :

    HTML

       <div class="text">
       <input type="text" class="input"  value="0" onkeypress="return runScript(event)"   id="sliderValue170h"/>
       </div>
    Javascript

     function runScript(e)
     {
         //Set Your logic
          if (e.keyCode == 13) {

          }
     }

Answer

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!