Question

我知道您可以使用<input type="number">将文本框限制为仅整数输入。但是，我想知道是否有可能范围限制这个？限制因素是没有使用javascript函数来检查每个keyup。这似乎有点沉重和不必要。我认为HTML5会内置一些东西来处理这个边缘情况，但我找不到任何东西。

例如，我有一个重复数据删除率的输入框，我想限制用户输入3到7之间的数字（整数或浮点数）。

我有一个选项 - 选择下拉列表，目前有整数和半数，但这并没有提供我正在寻找的详细程度。

Answer 1

正如我在前面的评论中所提到的......这里没有任何HTML（你认为应该有）。但是......既然你在问题中包含了Javascript和jQuery，我会提出这个简单而轻松的解决方案。

假设这个HTML ......

<form>
  <input type="number" min="3" max="7" step="0.5"></input>
</form>

然后我们可以使用这个脚本来处理我们的要求。

$( document ).ready(function() {
    $('input').change(function() {
      var n = $('input').val();
      if (n < 3)
        $('input').val(3);
      if (n > 7)
        $('input').val(7);
    });
});

基本上，在更改事件触发后，我们会快速检查以确保值在指导范围内，如果不是，则将其强制退回到范围内。

Answer 2

<?php

function basic_theme_styles() {
    wp_enqueue_style('foundation_css', get_template_directory_uri() . '/css/foundation.css');
    wp_enqueue_style('normalize_css', get_template_directory_uri() . '/css/normalize.css');
    wp_enqueue_style('main_css', get_template_directory_uri() . '/style.css');
}

add_action('wp_enqueue_scripts', 'basic_theme_styles');


function basic_theme_js() {
    wp_register_script('modernizr_js', get_template_directory_uri() . '/js/modernizr.js', array('jquery'), '', false);
    wp_enqueue_script('modernizr_js');

    wp_register_script('foundation_js', get_template_directory_uri() . '/js/foundation.min.js', array('jquery'), '1.1', true);
    wp_enqueue_script('foundation_js');

    wp_register_script('main_js', get_template_directory_uri() . '/js/app.js', array('jquery', 'foundation_js'), '', true);
    wp_enqueue_script('main_js');
}

add_action('wp_enqueue_scripts', 'basic_theme_js');
?>

<input type="number" min="3" max="7" step="0.01"></input>有助于限制最小数量粒度。

Answer 3

这是一个简单的解决方案，用于使用大多数浏览器支持的HTML5 constraint validation API检查输入是否包含在给定范围内的整数：

＆＃13;

<label for="n">Enter integer number 1&le;n&le;10</label>
<input type="number" min="1" max="10" step="1" id="n" oninput="(validity.valid)||(value='');">

＆＃13;

根据validity states rangeOverflow，rangeUnderflow，stepMismatch验证和自动更正输入：

＆＃13;

<label for="numberSize">Enter integral number 1&le;n&le;10</label>
<input type="number" min="1" max="10" id="numberSize" oninput="(!validity.rangeOverflow||(value=10)) && (!validity.rangeUnderflow||(value=1)) &&
(!validity.stepMismatch||(value=parseInt(this.value)));">

＆＃13;

这将发送

所有输入＆gt; max to max
输入＆lt;分钟到分钟

并截断小数值。

Answer 4

我认为，数字的HTML表单元素设计不良。它只需要整数，因此，如果您想在开头输入一个零或两个零（对于24小时制），那是不可能的。其他缺点是，在字段中键入内容时，输入不受限制，因此您可以添加字母，符号等，或完全忽略任何HTML定义的数字范围，而这很不利于此目的。

另一方面，文本的HTML表单元素使我们可以限制在以下示例中完成的字符数（最大长度）。 JS首先将输入仅限制为数字，然后针对类名而不是所有输入元素，因此可以在需要的时间和位置指定范围。我选择完全删除该字段，而不是输入一个数字，而是选择完全删除该字段，因为这对于用户来说很容易看出他们犯了一个错误，并且避免了激怒，因为不太可能设置一个特定的值。等于他们所想到的价值。

与jQuery 3.4.1结合使用

JSFiddle链接： https://jsfiddle.net/u2smwbgL/1/

HTML

<h1>Set Hours &#38; Minutes</h1>
<div class='left'>
<label>&nbsp;&nbsp;Hours
<input type="text" class='hour' maxlength="2" />
</label>
</div>

<div class='break'></div>

<div class='left'>
<label>&nbsp;&nbsp;Minutes
<input type="text" class='minute' maxlength="2" />
</label>
</div>

JavaScript

// Filter Inputs
(function($) {
$.fn.inputFilter = function(inputFilter) {
return this.on("input keydown keyup mousedown mouseup select contextmenu drop",function() {
if (inputFilter(this.value)) {
this.oldValue = this.value;
this.oldSelectionStart = this.selectionStart;
this.oldSelectionEnd = this.selectionEnd;
} else if (this.hasOwnProperty("oldValue")) {
this.value = this.oldValue;
this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
} else {
this.value = "";
}
});
};
}(jQuery));

// Hours & Minutes - Only Numbers
$(".hour,.minute").inputFilter(function(value) {
return /^[0-9]*$/i.test(value);
});

// Hours
$('.hour').on('input', function () {   
var value = this.value;
if (value !== '') {
value = parseFloat(value);
if (value > 23)
this.value = '';
}
});

// Minutes
$('.minute').on('input', function () {   
var value = this.value;
if (value !== '') {
value = parseFloat(value);
if (value > 59)
this.value = '';
}
});

CSS

.left {position:relative; float:left; width:100%;}
.break {position:relative; float:left; width:100%; height:20px;}
.minute,.hour {position:relative; float:left; width:50px; margin-left:20px; text-align:center;}
$('.minute').on('input', function () {   
var value = this.value;
if (value !== '') {
value = parseFloat(value);
if (value > 59)
this.value = '';
}
});

仅限数字输入框，带范围限制

4 个答案: