输入时清除输入框：使用javascript在html中无效

Question

My goal is to clear an input type text box when they are focused ONLY IF the input is INVALID. Let's say i have a text box that has a maximum value of 200

<input id="textbox" type = "text" max="200" runat="server">

so let's say I input 150 so it's valid hence if I focus again on it, it will remain its value 150 but, if i input greater than 200, my text box will have have a red border color on it and focused on another textbox(its working on my current code) and if i will focus on it again, i want to clear its value.

I wanna do something like this.

 input:invalid {
        box-shadow: 0 0 1px 3px #e74c3c;
    }

    input:focus:invalid {
        textbox.value = "" (i know this will not work,
                            but i wanna do something like this but how?)
    }

Note that I have multiple textboxes with different max and min values, not just one.

Answer 1

Please Try this pure JavaScript:

 function myFunction(control,max,min){ var val= Number(control.value); if(val>max || val<min){ control.value=""; } } 

 <input id="textbox" type = "text" max="200" onFocus="myFunction(this,250,100)"> 

Let assume your max value is 250 and min value is 100

Answer 2

You can use ValidityState interface which enables you to check the state of each input field. First you need to listen onfocus event. For example:

var form = document.querySelector('form'),
    elements = form.querySelectorAll('input'), 
    i;

for (i = 0; i < elements.length; i++) {
    elements[i].addEventListener('focus', function() {
        if (!this.validity.valid) {
            this.value = '';
        }
    }, false);
}

Demo: http://jsfiddle.net/yrovm6uh/

Answer 3

I think this is what your after, it changes red once it reaches the max amount of characters which is taken from the value in the input

At that point it also focuses on a seperate textbox with the cursor in it ready for the user to continue typing which uses its own max character value before turning red it self.

And if a user then clicks on the first textbox that turned red it will be cleared and the code below has the ability to clear the second textbox at the same time.

$(document).ready(function(){
    $(":input").on("focus keyup", function(){
        var max = $(this).attr("max");
        var current = $(this).val().length;

        if(current < max){
            $(this).css({"border" : "1px solid blue", "outline" : "none"});
        }else{
            $(this).css({"border" : "1px solid red", "outline" : "none"});
            $(this).focus(function(){
                $(this).val(" ").focus();
                //add this if you want the overflow textbox to be cleared aswell
                //$("#overflow").val(" ").css({"border" : "", "outline" : "none"});
            });
            $("#overflow").focus(); 
        }
    });
});

you can see it in action HERE

Hope this helps

Answer 4

using java script:

<input id="textbox" type = "text" max="200" onFocus="validate(this)">

JS:

function validate(control){
    var val= parseInt(control.value);

    if(val>200){
        control.value="";
    }
}

Answer 5

you can use jquery and bind focus like

$('#textbox').bind('focus', function() {

    if ( $('#textbox').val().length>200 ) { 

        $('#textbox').val('');

    }

});

can bind keyup event as well, it'll clear the textbox the moment user types more than 200 like.

$('#textbox').bind('keyup', function(e) {

    if ( $('#textbox').val().length>200 ) { 

        $('#textbox').val('');

    }

});

fiddle : http://jsfiddle.net/invincibleJai/Laqeh79u/

Answer 6

I'd suggest:

$('input').on('invalid', function () {
    this.value = '';
});

References:

• invalid event .

Answer 7

<input id="textbox" type = "text" max="200" runat="server">

in Jquery :

$("#textbox-id").focus(function(){
if($(this).val() > 200)
{
  $(this).val("");
  $(this).css("border","1px solid red");
}

});