javascript - 使用 jQuery 处理表单中的无效输入

Question

我有一个带有输入的表单，例如

<td class="units_depth_form">
  <input id="id_form-0-rain" name="form-0-rain" step="0.01" type="number" />
</td>

我想允许用户输入单位。例如，表单可能期望以英寸为单位的值，但我允许用户输入 '20 cm'，当离开文本框时，它将包含 '7.87'。

为此，我在页面的 JavaScript 部分添加了以下 jQuery 代码:

$(".units_temp_form input").focusout(function() {
    // Convert and replace if valid double ending with 'cm'

我在表单标记的末尾添加了'novalidate'。问题是当输入无效时 $(this).val() 为空。还有其他方法可以获取用户输入的值吗？

在有人提出解决方案之前，删除 type='number' 部分可以解决问题，但我不想这样做。该表单是通过 ModelForm 在 Django 中创建的，它会涉及大量的黑客攻击，这会破坏使用 Django 的初衷。

Answer 1

这似乎是the way browsers behave当他们在 type="number" 中发现无效数据时输入。

也许您最好的选择是使用 <input type="text"/>并自己实现向上和向下箭头。周围有几个选项，我发现one that looks nice和 another that keeps going on mouse down .

如果表单输入必须使用 type="number" 创建由于 Django，您可以在页面加载后立即在客户端更改它:

$(document).ready(function() {
    $(".units_temp_form input").each(function(){
        if ($(this).attr('type') == "number") {
            $(this).attr('type', 'text');
        }
    });
});