编辑输入字段时的触发方法

Fire method when input field is edited

本文关键字：方法 输入 字段 编辑      更新时间：2023-09-26

当编辑html输入字段时，我想触发一个方法。此方法显示一个数据列表，其中包含该输入字段的选项。我该怎么做？谢谢

<input type="text" onChange="mymethod()" />
<script type="text/javascript">
function mymethod() {
    //datalist code goes here//
}
</script>

你确实可以用纯JS解决这个问题，但我更喜欢jQuery来完成这样的任务。您可能想看看这个： 自动完成 |jQuery UI

好的浏览器支持开箱即用的<datalist>标签：

  <input list="browsers" name="browser">
  <datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>

请参阅：http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_datalist

以及支持的浏览器：http://caniuse.com/#feat=datalist

有一些替代方案具有更广泛的浏览器支持和更光滑的界面。

以下是使用 Select2 （http://ivaynberg.github.io/select2/） 的方法：

.HTML：

<select id="select2Example" multiple>
<option>Option 1</option>
<option>Option 2</option>
</select>

.JS：

$(function(){
  $('#select2Example').select2();
});

在普伦克：http://plnkr.co/edit/AwO4sHPZsP2BqgItkwil?p=preview

Typeahead JS也很好：

https://twitter.github.io/typeahead.js/

如果您决定自行实现这一点，则可以使用@MrBr1ghtSide提供的选项来添加事件处理程序：

.HTML：

<input onchange="handleChange"></input>

.JS： 

var handleChange=function(){
/*code to display options */
};

但这有以下缺点：

  • 它要求changeHandler处于全球范围内，这带来了冲突的可能性。
  • 您将无法使用多个函数来处理更改事件。
  • 您必须在两个位置（HTML 和 JS）维护函数的名称。

最好使用addEventListener（https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener - 您可以安全地忽略冒泡/捕获的东西）。但请注意，旧版本的 IE 改用 attachEvent。下面是一个示例：

.HTML：

.JS：

var inputBox=document.getElementById('exampleInput');
var handleChange=function(){
/*code to display options */
};
inputBox.addEventListener("change", handleChange);

另一种选择是使用库。许多人使用与jQuery相同的语法：http://api.jquery.com/on/。例如，Gator 是一个不错的小库，用于添加事件侦听器：http://craig.is/riding/gators 。使用jQuery或Gator，您可以执行以下操作：

.HTML：

<input id="exampleInput"></input>

带有jQuery的JS：

$（'#exampleInput）.on（'change'，handleChange）;

JS与鳄鱼：

var inputBox=document.getElementById('exampleInput');
Gator(inputBox).on('change',handleChange);
请注意，对

用于处理更改的函数进行去抖动是一个非常好的主意，以获得更好的用户体验和性能。请参阅此解释：http://benalman.com/code/projects/jquery-throttle-debounce/examples/debounce/

相关文章：