使用 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' 部分可以解决问题，但我不想这样做。这个表单是在 Django 中通过 ModelForm 创建的，它会涉及大量的黑客攻击，这会破坏首先使用 Django 的目的。

Answer 1

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

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

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

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