14

我正在创建一个带有选择下拉列表的表单。其中一个选项是“其他 - 请指定”，它应该显示一个额外的文本字段以获取更多详细信息。

我设法使用 onChange 事件 + 一些简单的值检查来做到这一点（因为我不能依赖位置）。

我开始对其进行测试并意识到虽然它在使用鼠标时可以正常工作（onChange 在控件失去焦点后运行），但在我使用键盘时却不行（因为它还没有失去焦点） - 只有在我按下之后选项卡是否显示更改（看起来很奇怪）。

在我看来，我好像遗漏了一些明显的东西，我寻找了其他事件，我发现最接近的是 onclick，但也不是这样。

所以问题是，有没有更好的方法来解决这个问题？

4

5 回答 5

10

您可以简单地将其添加到<select>标签中：

onkeyup="this.onchange();"
于 2010-11-30T11:51:32.943 回答
3

onkeyup="this.onchange(); 但如果没有变化，keyup 事件可能会触发

于 2012-01-06T14:32:44.760 回答
2

这篇文章可能会对你有所帮助。它使用这样的技巧：

// executes an onchange function after 750ms (or specified delay)
function safeOnChange1( code, delay ) {
  delay = delay || 750;
  window.clearTimeout( soc_id );
  soc_id = window.setTimeout( code, delay );
} 
// global timer ID for the safeOnChange1 function.
var soc_id = null;

这并不漂亮，但这就是在下拉菜单上使用 onchange 函数的问题。另一种解决方案是每隔一段时间检查下拉列表的值并在它发生更改时调用 onchange 函数的函数。

查找这样的教程：http: //onlinetools.org/articles/unobtrusivejavascript/chapter4.html

function addEvent(obj, evType, fn){ 
 if (obj.addEventListener){ 
   obj.addEventListener(evType, fn, false); 
   return true; 
 } else if (obj.attachEvent){ 
   var r = obj.attachEvent("on"+evType, fn); 
   return r; 
 } else { 
   return false; 
 } 
}
addEvent(window, 'load', foo);
addEvent(window, 'load', bar);

如果您可以查找它，还有一种 jquery 方式

于 2009-09-02T15:50:06.013 回答
1

这是使用“marcgg”答案的方法，（顺便说一句，这是这里唯一正确的答案，也是我在谷歌搜索之前想到的第一个想法）：

        // executes an onchange function after 750ms (or specified delay)
        function safeOnChange1(code, delay) {
            delay = delay || 750;
            window.clearTimeout(soc_id);
            soc_id = window.setTimeout(code, delay);
        }
        // global timer ID for the safeOnChange1 function.
        var soc_id = null;

    $('#your-input-element').keyup(function () {
        safeOnChange1(function () {
            var finalInputValue = $('#your-input-element').val();
            if (finalInputValue != "") {
                //do the work here
                console.log(finalInputValue);
            }
        }, 1000);
    });
于 2018-09-17T19:19:41.050 回答
1

示例 使用 angular 和 jquery，您可以随心所欲地实现这一点，

$("#mytxt").on('keypress', function() {
  console.log($("#mytxt").val())
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.11/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  Angular Example: <input type="text" ng-model="bad" ng-change="badri(bad)"/>
  <br/>
  jQuery Example: <input type="text" id="mytxt">
</div>
<script>
var app = angular.module("myApp", []); 
app.controller("myCtrl", function($scope) {
    $scope.badri = function(v) {
      console.log(v)
    }
});  
</script>

于 2017-07-28T12:30:57.460 回答