不失焦的情况下使用onchange？

Question

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

我使用了onChange事件和一些简单的值检查（因为我不能依靠位置）来实现它。

我开始测试它，并意识到当我用鼠标时它可以完美地工作（onChange在控件失去焦点后运行），但是当我用键盘时它不起作用（因为它还没有失去焦点），只有在我按下tab键后，更改才会出现（看起来很奇怪）。

对我来说，似乎我漏掉了一些明显的东西，我寻找其他事件，最接近的是onclick，但那也不是。

所以问题是，是否有更好的解决方法？

- tpk

Answer 1

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

onkeyup="this.onchange();"

- Shadow Wizard Chasing Stars

Answer 2

您可以使用“input”事件代替：

您可以使用“input”事件代替：

dropdown.addEventListener("input", () => {alert("CH-CH-CH CHANGES!")})

我在这里制作了一个简单的示例： https://codepen.io/sekmo/full/rNKzedZ PS： "input"事件也是React用于onChange属性的事件 :)

- sekmo

---

所以React一直在愚弄我们关于onChange的实际作用，而且没有人抱怨。 - Adnan

Answer 3

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

- Rost

Answer 4

这篇文章可能会对您有所帮助。它使用了一些技巧，例如：

// 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的方式来实现。

- marcgg

Answer 5

这是如何使用'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);
    });

- Adel Mourad

Answer 6

使用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>

- Mohideen bin Mohammed