Question

在组建一个小型webapp时，我正在尝试确保最终用户无法在可以保存已签名浮动的数字字段中放置无效字符。我正在使用Dojo搜索应用的CSS类（在本例中为ogInputNumber）并在输入，键盘和模糊上设置事件。

理想情况下，我希望输入为type="number"并且只允许数字，连字符（用于有符号浮点数）和句点字符作为小数位。如果用户包含多个连字符或句点字符，则JS应截断该第二个无效字符以及此后输入中的所有内容。不幸的是，JS的行为有所不同，具体取决于输入是type="number"还是type="text"。

对于type="text"，如果我尝试输入文字2.6a，2.6就可以了，但a会在输入事件中被捕获并且无法显示在输入。这是所需的行为，但我想将输入设置为type="number"，以便显示旋转器的数量，并且易于使用移动设备（因此默认情况下会显示数字键盘）。

对于type="number"，如果我尝试输入文字2.6a，则2.6可以保留，但只要输入a，整个字段就是清除了。这将防止任何无效的字符，但它是令人讨厌的过分热心。我在Chrome，Firefox，IE11和Opera上复制了这种行为。

任何人都可以提出任何建议，说明为什么JS在type="text"的输入和type="number"的输入之间的操作方式不同？

HTML：

<p>
    <label for="numberInput1">Text Input</label>
    <input id="numberInput1" class="ogInputNumber" type="text" />
</p>
<p>
    <label for="numberInput2">Number Input</label>
    <input id="numberInput2" class="ogInputNumber" type="number" />
</p>

JS：

// Checks number input fields for proper formatting
require(["dojo/domReady!", "dojo/on", "dojo/query"],

function (ready, on, query) {
    query(".ogInputNumber").forEach(function (node) {
        // Replace all the non-numeric, non-period, and non-hyphen characters with nothing while the user is typing
        on(node, "input, keyup", function () {
            this.value = this.value.replace(/[^\d\.-]/g, '');
        });
        // When the user leaves the input, format it properly as a signed float (or zero if it's something weird)
        on(node, "blur", function () {
            try {
                if (this.value) {
                    this.value = parseFloat(this.value).toString();
                } else {}
            } catch (error) {
                this.value = 0;
            }
        });
    });
});

使用JSFiddle：http://jsfiddle.net/etehy6o6/1/

Answer 1

我认为这是数字输入类型的默认行为，但我不确定。理所当然地认为输入不应该让用户放置任何非数字的内容，因此它会在你发出keyup事件之前清除所有值。

所以保持最后一个有效值声明一个超出事件范围的变量，并将其设置为因无效键输入而未被清除的替换值。

使用小提琴中的代码：

编辑，因为在评论中解决了错误

HTML

<!-- I asigned default values to test other scenarios -->
<p>
    <label for="numberInput1">Text Input</label>
    <input id="numberInput2" class="ogInputNumber" type="text" value="3.1416" />
</p>
<p>
    <label for="numberInput">Number Input</label>
    <input id="numberInput" class="ogInputNumber" type="number" value="3.1416" />
</p>

的Javascript

// Checks number input fields for proper formatting
require(["dojo/domReady!", "dojo/on", "dojo/query"],

function (ready, on, query) {
    query(".ogInputNumber").forEach(function (node) {
        var validValue = this.value;
        // Replace all the non-numeric, non-period, and non-hyphen characters with nothing while the user is typing
        on(node, "input, keyup", function () {
            if (this.value == '' && validValue.length > 1) {
                this.value = validValue;
            }
            this.value = this.value.replace(/[^\d\.-]/g, '');
            validValue = this.value;
        });
        // When the user leaves the input, format it properly as a signed float (or zero if it's something weird)
        on(node, "blur", function () {
            try {
                if (this.value) {
                    this.value = parseFloat(this.value).toString();
                } else {}
            } catch (error) {
                this.value = 0;
            }
        });
    });
});

HTML编号输入行为错误的自定义验证

1 个答案:

HTML

的Javascript