javascript - 输入:invalid in html using javascript时清空输入框

Question

我的目标是仅在输入无效时清除输入类型文本框。 假设我有一个最大值为 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

您可以使用 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/