Question

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

{"ToughGuys":[
    {"name":"Ivan", "position":"Executive"},
    {"name":"Little Johnny", "position":"Intern"},
    {"name":"Beige Cathy", "position":"Executive"},
    {"name":"Stan", "position":" original Intern"}
]}

我希望允许用户输入单位。例如，表单可以预期以英寸为单位的值，但我允许用户输入<td class="units_depth_form"> <input id="id_form-0-rain" name="form-0-rain" step="0.01" type="number" /> </td>，当离开文本框时，它将包含'20 cm'。

要做到这一点，我在页面的JavaScript部分有以下jQuery代码：

'7.87'

我在表单标记的末尾添加了$(".units_temp_form input").focusout(function() { // Convert and replace if valid double ending with 'cm'。问题是当输入无效时'novalidate'为空。是否有其他方法可以获得用户输入的值？

在任何人建议解决方案之前，删除$(this).val()部分可以解决问题，但我不想这样做。这个表单是在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');
        }
    });
});

使用jQuery从表单处理无效输入

1 个答案: