当前位置: 动力学知识库 > 问答 > 编程问答 >

javascript - Change border color when var length less than 1?

问题描述:

Change border color when var length less than 1 ?

..................................................................................................................................................................

http://jsfiddle.net/66chLg61/

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

<script type="text/javascript">

$(window).load(function(){

$('#txt').keydown(function (e){

if(e.keyCode == 13){

var ex_se = $('#txt').val();

var ex_se_lenght = ex_se.length;

if(ex_se_lenght < '1')

{

// change border color id="txt" to red //

alert('red');

}

else

{

// change border color id="txt" to black //

alert('black');

}

}

})

});

</script>

<input type="text" id="txt"/>

网友答案:

Try this : change $(window).laod to $(document).ready and you are comparing length with string instead of integer so change if(ex_se_lenght < '1') to if(ex_se_lenght < 1)

NOTE - alert will be seen after 'ENTER' button pressed because condition if(e.keyCode == 13) is there.

code :

$(document).ready(function(){
$('#txt').keydown(function (e){
    if(e.keyCode == 13)
    {
        var ex_se = $(this).val();
        var ex_se_lenght = ex_se.length;

        if(ex_se_lenght < 1)
            {
                // change border color id="txt" to red //
                alert('red');
            }
        else
            {
                // change border color id="txt" to black //
                alert('black');
            }
    }
})
});

Demo

As Added by @Danko, to add border color create below css class and add / remove for red border

.alert {
    outline:none;
    border:2px solid red;
}

And JQuery :

if(ex_se_lenght < 1)
{
    $(this).addClass('alert');
    alert('red');
}
else
{
    $(this).removeClass('alert');
    alert('black');
}

Demo By Danko

网友答案:

Modify your js like this:

$('#txt').keydown(function (e) {
    if (e.keyCode == 13) {
        var ex_se = $('#txt');
        var ex_se_lenght = ex_se.val().length;
        var color = ex_se_lenght < 1 ? 'red' : 'black';
        ex_se.css('border-color', color);
    }
});

Demo: http://jsfiddle.net/lotusgodkk/66chLg61/11/

网友答案:

try

$(window).load(function () {
    $('#txt').keydown(function (e) {
        if (e.keyCode == 13) {
            var ex_se = $('#txt').val();
            var ex_se_lenght = ex_se.length;

            if (ex_se_lenght < '1') {
                // change border color id="txt" to red //
                $("#txt").removeClass("black").addClass("red");  // remove previous added class black

            } else {
                // change border color id="txt" to black //
                $("#txt").removeClass("red").addClass("black"); // remove previous added class red
            }
        }
    })
});

DEMO

网友答案:

You can do something like this:

if(ex_se_lenght < '1')
{
    // change border color id="txt" to red //
    $("#txt").css('border-color', 'red');
    alert('red');
}
else
{
    // change border color id="txt" to black //
    $("#txt").css('border-color', 'black');
    alert('black');
}

Fiddle...

EDITED: wrong selector...

分享给朋友:
您可能感兴趣的文章:
随机阅读: