对于<input type="number">元素,maxlength无效。如何限制该数字元素的最大长度?


当前回答

我发现你不能使用任何onkeydown, onkeypress或onkeyup事件的完整解决方案,包括移动浏览器。顺便说一下,onkeypress已弃用,不再出现在chrome/opera的android(见:UI事件 W3C工作草案,2016年8月4日)。

我只使用oninput事件找到了一个解决方案。 你可能需要做额外的数字检查,如负号/正号或小数和千个分隔符等,但作为一个开始,以下应该足够了:

函数checkMaxLength(事件){ //准备恢复之前的值 如果这一点。oldValue === undefined) { 这一点。oldValue = this.defaultValue; } 如果(this.value。长度> this.maxLength) { //设置回前一个值 这一点。value = oldVal; } 其他{ //存储之前的值。 这一点。oldValue = this.value; //对+/-或。/等进行额外检查 //同时考虑合并'maxlength' //使用'min'和'max'来防止错误提交。 } }

我还建议将maxlength与min和max结合起来,以防止如上所述的错误提交。

其他回答

<input type="number" onchange="this.value=Math.max(Math.min(this.value, 100), -100);" />

或者如果你想什么都不能输入

<input type="number" onchange="this.value=this.value ? Math.max(Math.min(this.value,100),-100) : null" />

我知道已经有一个答案,但如果你想让你的输入行为完全像maxlength属性或尽可能接近,使用以下代码:

(function($) {
 methods = {
    /*
     * addMax will take the applied element and add a javascript behavior
     * that will set the max length
     */
    addMax: function() {
        // set variables
        var
            maxlAttr = $(this).attr("maxlength"),
            maxAttR = $(this).attr("max"),
            x = 0,
            max = "";

        // If the element has maxlength apply the code.
        if (typeof maxlAttr !== typeof undefined && maxlAttr !== false) {

            // create a max equivelant
            if (typeof maxlAttr !== typeof undefined && maxlAttr !== false){
                while (x < maxlAttr) {
                    max += "9";
                    x++;
                }
              maxAttR = max;
            }

            // Permissible Keys that can be used while the input has reached maxlength
            var keys = [
                8, // backspace
                9, // tab
                13, // enter
                46, // delete
                37, 39, 38, 40 // arrow keys<^>v
            ]

            // Apply changes to element
            $(this)
                .attr("max", maxAttR) //add existing max or new max
                .keydown(function(event) {
                    // restrict key press on length reached unless key being used is in keys array or there is highlighted text
                    if ($(this).val().length == maxlAttr && $.inArray(event.which, keys) == -1 && methods.isTextSelected() == false) return false;
                });;
        }
    },
    /*
     * isTextSelected returns true if there is a selection on the page. 
     * This is so that if the user selects text and then presses a number
     * it will behave as normal by replacing the selection with the value
     * of the key pressed.
     */
    isTextSelected: function() {
       // set text variable
        text = "";
        if (window.getSelection) {
            text = window.getSelection().toString();
        } else if (document.selection && document.selection.type != "Control") {
            text = document.selection.createRange().text;
        }
        return (text.length > 0);
    }
};

$.maxlengthNumber = function(){
     // Get all number inputs that have maxlength
     methods.addMax.call($("input[type=number]"));
 }

})($)

// Apply it:
$.maxlengthNumber();

与type="number"一样,指定max而不是maxlength属性,这是可能的最大数目。如果是4位数,最大值应该是9999,5位数是99999,以此类推。

另外,如果你想确保它是一个正数,你可以设置min="0",以确保它是正数。

对于有长度限制的数字输入,您也可以尝试这种方法

<input type="tel" maxlength="3" />

另一种选择是为任何具有maxlength属性的东西添加一个侦听器,并将切片值添加到其中。假设用户不想在与输入相关的每个事件中使用函数。下面是一个代码片段。忽略CSS和HTML代码,JavaScript才是最重要的。

// Reusable Function to Enforce MaxLength function enforce_maxlength(event) { var t = event.target; if (t.hasAttribute('maxlength')) { t.value = t.value.slice(0, t.getAttribute('maxlength')); } } // Global Listener for anything with an maxlength attribute. // I put the listener on the body, put it on whatever. document.body.addEventListener('input', enforce_maxlength); label { margin: 10px; font-size: 16px; display: block } input { margin: 0 10px 10px; padding: 5px; font-size: 24px; width: 100px } span { margin: 0 10px 10px; display: block; font-size: 12px; color: #666 } <label for="test_input">Text Input</label> <input id="test_input" type="text" maxlength="5"/> <span>set to 5 maxlength</span> <br> <label for="test_input">Number Input</label> <input id="test_input" type="number" min="0" max="99" maxlength="2"/> <span>set to 2 maxlength, min 0 and max 99</span>