Question

我有一个输入字段，用户将根据输入数字输入isbn数字我需要填充两个输入字段，即书名和书籍作者名称我在输入的onblur上调用javscript函数，我得到了正确的值但我的问题是，如果用户不会从输入字段移动光标并单击提交按钮，那么我将如何在这些场景中填充这两个输入字段onblur无法正常工作

<form name="post" id="post" method="post" action="#">
   <input type="text" name="price" id="price">
   <input type="text" name="isbn_number" id="isbn_number" onblur="getdetail()">
</form>

Answer 1

选择您喜欢的解决方案并根据您的网站进行调整：

1）如果您的浏览器支持它，最简单的方法是使所有字段都需要并使用onchange而不是onblur。这将强制用户输入isbn，这将触发包含所需更多输入的onchange。

<form name="post" id="post" method="post" action="#">
   <input type="text" name="price" id="price" required>
   <input type="text" name="isbn_number" id="isbn_number" onchange="getdetail()" required>
</form>

2）检查字段后手动提交。

<form name="post" id="post" method="post" action="#">
   <input type="text" name="price" id="price">
   <input type="text" name="isbn_number" id="isbn_number" onblur="getdetail()">
   <input type="submit">
</form>
<script>
    document.querySelector('input[type="submit"]').addEventListener('click', function ( event ) {
        var valid = false;
        event.preventDefault();
        // ...
        // add validation code here.
        // ...
        if (valid) document.querySelector('#post').submit();
    });
</script>

3）只有在一切有效时才激活提交。

<form name="post" id="post" method="post" action="#">
   <input type="text" name="price" id="price">
   <input type="text" name="isbn_number" id="isbn_number">
   <input type="submit" disabled="disabled">
</form>
<script>
    var valid = false;
    document.querySelector('#post').addEventListener('change', function ( event ) {
        if (event.target.name === 'isbn_number') getdetail();
        // ...
        // add validation code
        // if (stuff && stuff && stuff) valid = true;
        if (valid) document.querySelector('input[type="submit"]').removeAttribute('disabled');
    });
</script>

如何基于jquery中其他输入字段的用户输入来对输入字段及其值进行遗传

1 个答案: