javascript - Jquery根据输入值显示输入文本

Question

我的 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/

<input type="text" id="firstinput"/>
<p id="secondinput"><input type="text"/></p>


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

这是因为新框也 = "input"; 如果你给 hotmail 文本框它自己的 id，它就不会隐藏

<input id="hotmail" type="text"/>

接着

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