[英]enforce values in html5 datalist with javascript
How can I get this working on my website - not just jsfiddle?我怎样才能在我的网站上使用它 - 不仅仅是 jsfiddle?
I am trying to make it so users can only submit an entry from the datalist - if they type it wrong then there is an error message and the form will not submit.我正在努力使用户只能从数据列表中提交一个条目 - 如果他们输入错误,则会出现错误消息并且表单将不会提交。
I have this working in jsFiddle ( http://jsfiddle.net/9DG5m/1/ ), but can't get it to work on my website ( http://austinsamsel.com/test/vanity/index-form.html ) .我在 jsFiddle ( http://jsfiddle.net/9DG5m/1/ ) 中有这个工作,但无法让它在我的网站上工作 ( http://austinsamsel.com/test/vanity/index-form.html )。 I looked for errors with firebug and didn't find anything.
我查找了 firebug 的错误,但什么也没找到。 Been stuck on this a couple hours.
坚持了几个小时。 ~noob
~菜鸟
the script and form :脚本和形式:
<script type="text/javascript"> // Find all inputs on the DOM which are bound to a datalist via their list attribute. var inputs = document.querySelectorAll('input[list]'); for (var i = 0; i < inputs.length; i++) { // When the value of the input changes... inputs[i].addEventListener('change', function() { var optionFound = false, datalist = this.list; // Determine whether an option exists with the current value of the input. for (var j = 0; j < datalist.options.length; j++) { if (this.value == datalist.options[j].value) { optionFound = true; break; } } // use the setCustomValidity function of the Validation API // to provide an user feedback if the value does not exist in the datalist if (optionFound) { this.setCustomValidity(''); } else { this.setCustomValidity('Spelling counts.'); } }); } </script> <form id="type_form" method="post" > <input id="nav" list="optionzzz" maxlength="10" class="mustbe" type="text" autocomplete="off" name="nav" placeholder="TYPE YOUR CHOICE... (spelling counts)" autofocus required> <datalist id="optionzzz"> <option value="OPTION1"> <option value="OPTION2"> <option value="OPTION3"> <option value="OPTION4"> <option value="OPTION5"> </datalist> <script type="text/javascript"> if (!("autofocus" in document.createElement("input"))) { document.getElementById("nav").focus(); } </script> <button class="send" type="submit">SEND</button></form>
Another way to enforce choosing from a datalist is to have every item of the datalist appear in the pattern
property of the input
as well.强制从数据列表中进行选择的另一种方法是让数据列表的每个项目也出现在
input
的pattern
属性中。 Example:例子:
<form> <input required list="datalist" pattern="one|two|three" name="me"> <datalist id="datalist"> <option value="one"> <option value="two"> <option value="three"> </datalist> <button type="submit">Submit</button> </form>
The solution is to move your inline script to end of page so it would be解决方案是将您的内联脚本移动到页面末尾,这样就可以了
<script type="text/javascript">
// Find all inputs on the DOM which are bound to a datalist via their list attribute.
var inputs = document.querySelectorAll('input[list]');
....
</script>
</body>
</html>
because the script is executing on elements which are not loaded yet, so during this因为脚本在尚未加载的元素上执行,所以在此期间
var inputs = document.querySelectorAll('input[list]');
there are no inputs yet loaded.尚未加载任何输入。
You can also include the function in您还可以将函数包含在
$(document).ready(function () { .. //your function will come here }
so this will be executed when dom is ready所以这将在 dom 准备好时执行
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.