jquery keyup function: enabling/disabling a textbox using keyup()

Question

I am trying to disable the textbox using keyup functionality. I have a TextArea and a Text Box. Now i use a keyup operation on backspace key, like if the length of content inside textarea is 3 it should disable the textbox. I also have an alert message which pops when the length of content in text area is 3. Code worked for the pop up but it doesnot worked for the textbox. What am i missing? Please help. Here is my code:

$('#comment').keyup(function() {
    if (event.which == 8) {
           var txt = $('#comment').val().length;
            if(txt == 3)
            {
                alert("backspace");
                $("#text1").attr("diasbled", "diasbled");
            }
        }

});

And here is the JSfiddle for the purpose.

such a silly mistake i have done. Thank you guys. :)

chaitanya90
– chaitanya90

2014-04-24 07:21:43 +00:00
Commented Apr 24, 2014 at 7:21 — chaitanya90
– chaitanya90, Commented Apr 24, 2014 at 7:21

nrsharma · Accepted Answer · 2014-04-24 07:26:44Z

5

You have some typo here it should be disabled not diasbled Try this

$('#comment').keyup(function () {
    var len = $(this).val().length;
    if (len >= 3) {
        $("#text1").prop("disabled", true);
    }
    else{
     $("#text1").prop("disabled", false);
    }
});

DEMO

edited Apr 24, 2014 at 7:26

answered Apr 24, 2014 at 7:12

nrsharma

2,5724 gold badges21 silver badges36 bronze badges

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

3 Comments

chaitanya90 Over a year ago

if i want to do the same on backspace event then how to do it. can you please explain me that too.

nrsharma Over a year ago

No need to handle backspace here, just put the else condition, see my updated answer

TheDean Over a year ago

if u are using version earlier than Jquery 1.6 then You will have to use .attr (like $("#text1").attr("disabled", true);) instead of .prop @nrsharma am i right ??

Felix · Accepted Answer · 2014-04-24 07:30:35Z

3

You need to do:

1) this.value.length to get the total characters length of your textarea

2) From jQuery version 1.6 , use .prop() instead of .attr() to set the properties of an element

3) Correct the typo: it should be disabled not diasbled

$('#comment').keyup(function () {
    if (this.value.length >= 3) {
        $("#text1").prop("disabled", true);
    } else {
        $("#text1").prop("disabled", false);
    }
});

Updated Fiddle

edited Apr 24, 2014 at 7:30

answered Apr 24, 2014 at 7:10

Felix

38.2k8 gold badges45 silver badges56 bronze badges

Comments

razahassank · Accepted Answer · 2014-04-24 07:18:36Z

Your code is fine.. but you mispelled the "disabled" in your code. Here's the sample..

<html>
<head>
<title>js test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<input type="text" value="" id="comment" />
<input type="text" value="" id="text1" />
<script type="text/javascript">
$(document).ready(function()
{
    $('#comment').keyup(function(e) {
        if (e.which == 8) {
               var txt = $('#comment').val().length;
                if(txt == 3)
                {
                    alert("backspace");
                    $("#text1").attr("disabled", "disabled");
                }
            }

    });
});
</script>
</body>

Somnath Kharat · Accepted Answer · 2014-04-24 07:18:50Z

1

Use prop instead of attr also pass event to function

 $('#comment').keyup(function (event) { //and event here
    if (event.which == 8) {
        if ($(this).val().length >= 3) {
            $("#text1").prop("disabled", true);
        }
    }
});

edited Apr 24, 2014 at 7:18

answered Apr 24, 2014 at 7:12

Somnath Kharat

3,5952 gold badges31 silver badges51 bronze badges

Collectives™ on Stack Overflow

jquery keyup function: enabling/disabling a textbox using keyup()

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related