Question

我在使用jquery时遇到问题，在显示基于输入值的输入文本时。这是JS小提琴演示：

当我尝试输入@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 here

    $("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 Here：

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

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

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

然后

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

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

5 个答案: