Question

有没有办法在输入时检查输入是否已填写？现在我的代码检查输入是否填写，然后在用户点击输入后显示div。一旦满足未来的验证方法，我希望显示div ...而不必单击输入外部。

如果用户必须返回并删除输入中的数据，还有一种方法可以显示div吗？

$(function () {   
    var _=$('input');
    
    _.change(function() {
        
        if (_.filter(function (){return $(this).val().length }).length==_.length)
        $('.next').show();
        else
            $('.next').hide();
            
    });
});

.next { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="name" type="text" />
<input id="email" type="text" />


<a class="next">show div</a>

Answer 1

只有在离开（模糊）输入元素时才会触发onchange事件。要跟踪与输入焦点状态无关的更新，您必须使用其他事件类型，例如onkeydown或onkeypress。

$(function () {   
    var $input = $('input');

    $input.on('keypress', function() {
        if ($input.filter(function (){return $(this).val().length }).length == $input.length) {
            $('.next').show();
        }
        else {
            $('.next').hide();
        }
    });
});

Answer 2

使用keyup作为事件监听器应该可以实现。有点像：

string ans, s;
cin >> s;
char has[]={'2','3','4','5'};
for(unsigned int i=0; i<s.length(); i++)
{
    ans = ans + has[s[i]-'a']; // << concat string and assign
    cout << ans[i] << " ";
}
cout<<ans; // << cout knows how to handle strings

Answer 3

如@feeela所述，＆＃34;更改＆＃34;一旦焦点丢失，事件才会触发。以下代码很简单，可以满足您的要求，包括即使输入再次变为空白，也可以保持DIV可见。

请改为尝试：

＆＃13;

$(function () {   
  $('input').on('keypress', function() {
    if ($(this).val()) { // Gets the firing input's value
      $('.next').show();
    }
  });
});

＆＃13;

或者，你可以设置变量，但是这段代码很简单，没有真正的需要：

＆＃13;

$(function () {   
  var $inputs = $('input');
  var $next = $('.next');
  $inputs.on('keypress', function() {
    if ($(this).val()) { // We still want to use "this" here, so we're only examining the input that fired the event; otherwise, it will only get the value of the first input in the set
      $next.show();
    }
  });
});

＆＃13;

Answer 4

这应该有效。我认为要求不是其中一个盒子符合要求。

因此，在我的示例中，如果在任何输入中按下任何键，则会检查所有键。一旦满足要求，Div就会显示出来。

它使用keyup事件和jquery的每个功能。您可以随机填写输入。我先做了keydown，但基本上你会很快检查。

＆＃13;

// JavaScript source code
$(function () {
var _ = $('input');

_.keyup(function () {
    var allOk = true;
    _.each(function () {
        if ($(this).val() == '') {
            allOk = false;
        }
    });
    if (allOk) {
        $('.next').show();
    }
    else {
        $('.next').hide();
    }
});
});

＆＃13;

.next { display: none; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="name" type="text" />
<input id="email" type="text" />


<a class="next">show div</a>

＆＃13;

在没有单击输入的情况下填写输入时显示新的div

4 个答案: