Jquery显示基于输入值的输入文本

我在jquery上面临问题，在输入值的基础上显示输入文本。 这是JS小提琴演示：

http://jsfiddle.net/Ltapp/364/

当我尝试输入@hotmail时，输入框将会显示。 但是当我想在#hotm输入框中键入一些文本时，它会再次隐藏。

JS代码：

$(window).load(function(){ var myString = '@hotmail'; $('#hotm').hide(); $("input").keyup(function () { var value = $(this).val(); if($(this).val().match(myString)) { $('#hotm').show(); } else { $('#hotm').hide(); } }); }); 

Answer 1

这是因为你的选择器$("input")会影响两个输入元素。 我已将其更新为$("input:first")选择器。 JsFiddle在这里

  $("input:first").keyup(function () { var value = $(this).val(); if(value.match(myString)) { $('#hotm').show(); } else { $('#hotm').hide(); } }); 

Answer 2

正如许多人所说，你对我做了一点改变的所有输入都有约束力：

 $(function(){ var myString = /@hotmail/ig; $("#check").bind('keyup checkvalue', function() { $('#hotm')[myString.test(this.value) ? 'show' : 'hide'](); }).trigger('checkvalue'); }); 

使用正则表达式，如果你正在使用@HoTmAil它也会点击它，并且还添加了一个自定义事件检查checkvalue以查看#hotm是否应该可见，例如你可能正在使用的表单上的回发。

---

演示： http ： //jsfiddle.net/voigtan/xjwvT/1/

Answer 3

你正在影响所有输入。 要么为每个人提供唯一的ID / Class，要么使用jQuery $（this）方法。

请参见JSFiddle：

http://jsfiddle.net/Ltapp/366/

  
 var myString = '@hotmail'; $('#secondinput').hide(); $("#firstinput").keyup(function () { var value = $(this).val(); if($(this).val().match(myString)) { $('#secondinput').show(); } else { $('#secondinput').hide(); } }); 

Answer 4

将此用于if部分：

 if($(this).val().match($(this).val().substr(0,strlen($(this).val()))) 

Answer 5

这是因为新的盒子也是“输入”; 如果你给hotmail文本框它自己的id，它就不会隐藏

然后

 $("#hotmail").keyup(function () {...});