在不失去焦點的情況下改變？

Question

我正在創建一個帶有 select 下拉列表的表單。 其中一個選項是“其他 - 請說明”，它應該顯示一個額外的文本字段以獲取更多詳細信息。

我設法使用 onChange 事件 + 一些簡單的值檢查來做到這一點（因為我不能依賴這個位置）。

我開始測試它並意識到雖然它在使用鼠標時運行良好（onChange 在控件失去焦點后運行），但當我使用鍵盤時它不會（因為它還沒有失去焦點） - 只有在我按下選項卡是否出現更改（看起來很奇怪）。

在我看來，我似乎遺漏了一些明顯的東西，我尋找了其他事件，發現的最接近的事件是 onclick，但也不是。

所以問題是，有沒有更好的方法來解決這個問題？

Answer 1

您只需將其添加到<select>標記即可：

onkeyup="this.onchange();"

Answer 2

onkeyup =“this.onchange（）;但如果沒有變化，keyup事件可能會觸發

Answer 3

本文可能對您有所幫助。 它使用這樣的技巧：

// 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方式

Answer 4

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

Answer 5

這是如何使用'marcgg'回答，（這是BTW中唯一正確的答案，是谷歌搜索之前想到的第一個想法）：

        // 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);
    });

Answer 6

您可以改用“輸入”事件：

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

我在這里做了一個簡單的例子： https://codepen.io/sekmo/full/rNKzedZ

PS：“輸入”事件也是 React 用於 onChange 屬性的事件:)