1

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>
0

5 Answers 5

2

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('');
        }
    }
});
Sign up to request clarification or add additional context in comments.

Comments

0

use keyup instead of keydown

 input.on('keyup', function(e) {
   ....

Comments

0

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) {

      }
 }

Comments

0
$('#sliderValue170h').change(function(){
{
  //your code here
});

1 Comment

textfield text is changing while clicking on any other button click
0
$('#sliderValue170h').bind('change keyup',function(){

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('');
        }
});

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.