我如何实施菜单选择变化的 <input type="“text”"> 字?

StackOverflow https://stackoverflow.com/questions/1443292

  •  22-07-2019
  •  | 
  •  

题

<select> 有这API。怎么样 <input>?

有帮助吗？

解决方案

你可以使用 .change()

$('input[name=myInput]').change(function() { ... });

然而，这种事件只会火时的选择已经失去了重点，所以你需要点别的地方有这方面的工作。

如果不是很正确，您可以使用一些其他的 jQuery事件 喜欢 候，把, 表示 或 按键 -根据精确的效果您想要的。

其他提示

如@pimvdb在他的评论说，

  

请注意变化当输入元件已失去焦点将只触发。   这里还设有触发每当文本框更新输入事件   内无需失去焦点。不像它也适用于关键事件   粘贴/拖动文本。

（参见文档。）

这是非常有用，这是值得把它在一个答案。目前（V1.8 *？）有jQuery中FN没有。输入（）便利，所以做事情是这样的

$('input.myTextInput').on('input',function(e){
 alert('Changed!')
});

我建议使用keyup事件类似下面：

$('elementName').keyup(function() {
 alert("Key up detected");
});

有实现相同的结果，所以我想这是降低到偏爱，并取决于你想如何准确工作的一些方法。

更新：这仅适用于手动输入不复制和粘贴

。

有关复制和粘贴我建议以下内容：

$('elementName').on('input',function(e){
 // Code here
});

下面是我使用的代码：

$("#tbSearch").on('change keyup paste', function () {
    ApplyFilter();
});

function ApplyFilter() {
    var searchString = $("#tbSearch").val();
    //  ... etc...
}

<input type="text" id="tbSearch" name="tbSearch" />

此工作很好地，特别是当与一个jqGrid控制配对。你可以只输入到一个文本框和立即的你jqGrid查看结果。

有是的一个且仅一个可靠的方法来做到这一点下，并且它是通过在间隔拉值，并将其与一个缓存值。

之所以这样，是唯一的办法，是因为有多种方式使用各种输入（键盘，鼠标，粘贴，浏览器历史记录，voiceinput等）来更改输入字段，并使用标准的事件，你永远无法检测到所有的人在跨浏览器环境。

幸运的是，由于在jQuery的事件基础设施，它很容易添加自己的inputchange事件。我这样做是在这里：

$.event.special.inputchange = {
    setup: function() {
        var self = this, val;
        $.data(this, 'timer', window.setInterval(function() {
            val = self.value;
            if ( $.data( self, 'cache') != val ) {
                $.data( self, 'cache', val );
                $( self ).trigger( 'inputchange' );
            }
        }, 20));
    },
    teardown: function() {
        window.clearInterval( $.data(this, 'timer') );
    },
    add: function() {
        $.data(this, 'cache', this.value);
    }
};

使用它喜欢：$('input').on('inputchange', function() { console.log(this.value) });

<强>有一个演示这里： http://jsfiddle.net/LGAWY/

如果你害怕在多个间隔，可以绑定/解除绑定上focus / blur此事件。

<input id="item123" class="firstName" type="text" value="Hello there" data-someattr="CoolExample" />

$(".firstName").on('change keyup paste', function () {
   var element = $(this);
   console.log(element);
   var dataAttribute = $(element).attr("data-someattr");
   console.log("someattr: " + dataAttribute );
});

我建议使用this关键字，以获得访问整个元素让你能够做你需要与此元素的一切。

$("input").keyup(function () {
    alert("Changed!");
});

如果它是动态的下面将甚至工作/ Ajax调用。

脚本：

jQuery('body').on('keyup','input.addressCls',function(){
  console.log('working');
});

HTML，

<input class="addressCls" type="text" name="address" value="" required/>

我希望这个工作代码将帮助别人谁是试图动态访问/ Ajax调用...

您可以简单地用id工作

$("#your_id").on("change",function() {
    alert(this.value);
});

$("input").change(function () {
    alert("Changed!");
});

这为我工作。如果与名字段的 FIELDA 点击或任意键进入它更新场ID的 fieldB 

jQuery("input[name='fieldA']").on("input", function() {
    jQuery('#fieldB').val(jQuery(this).val());
});

您可以使用 .keypress() 。

例如，考虑HTML：

<form>
  <fieldset>
    <input id="target" type="text" value="Hello there" />
  </fieldset>
</form>
<div id="other">
  Trigger the handler
</div>

在事件处理程序可以绑定到输入字段：

$("#target").keypress(function() {
  alert("Handler for .keypress() called.");
});

我完全同意安迪;一切都取决于你想要它如何工作的。

您可以做到这一点的方式不同， KEYUP 就是其中之一。但是我给下面的变化的例子。 

$('input[name="vat_id"]').on('change', function() {
    if($(this).val().length == 0) {
        alert('Input field is empty');
    }
});

NB：的输入[名称= “VAT_ID”] 与您的输入替换的 ID 或命名

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top