Question

我的目标是只在输入为INVALID时才清除输入类型文本框。我们假设我的文本框最大值为200

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

所以，让我说我输入150这样它有效，因此如果我再次关注它，它将保持其值150 但是，如果我输入大于200，我的文本框上会有一个红色的边框颜色，并专注于另一个文本框（它在我当前的代码上工作），如果我再次关注它，我想清除它的价值。

我想做这样的事情。

 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?)
    }

请注意，我有多个文本框，其中包含不同的最大值和最小值，而不仅仅是一个。

Answer 1

请尝试这个纯JavaScript：

＆＃13;

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

＆＃13;

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

＆＃13;

假设您的最大值为250，最小值为100

Answer 2

您可以使用ValidityState界面来检查每个输入字段的状态。首先，你需要听onfocus事件。例如：

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

演示：http://jsfiddle.net/yrovm6uh/

Answer 3

我认为这就是你的追求，一旦达到max

中的值input字符数，它就会变红

此时它还会关注一个单独的textbox，其中有光标，用户可以继续键入，然后使用自己的max字符值，然后再将其变为红色。

如果用户点击了第一个变为红色的textbox，它将被清除，下面的代码可以同时清除第二个textbox。

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

您可以在行动HERE

中看到它

希望这有帮助

Answer 4

使用javascript：

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

时：

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

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

Answer 5

你可以使用jquery和绑定焦点，如

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

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

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

    }

});

也可以绑定keyup事件，它会在用户输入200以上时清除文本框。

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

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

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

    }

});

小提琴：http://jsfiddle.net/invincibleJai/Laqeh79u/

Answer 6

我建议：

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

参考文献：

invalid event。

Answer 7

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

在Jquery中

：

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

}）;

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

7 个答案:

演示：http://jsfiddle.net/yrovm6uh/