Question

我的问题是，当用户开始输入文本框时，只有当按钮不会出现时，才会出现Javascript函数以使按钮显示。

这是我的代码

<label for="color" class="control-label col-xs-4">
    <p class="left">Color/s</p>
</label>
<div class="col-xs-7">
    <input name="color" class="form-control req" autocomplete = "off" />
    <input type="button" value="Add Color" />
</div>

Answer 1

尝试使用input事件

$('input[name="color"]').on('input',function(){
  $('input[type="button"]')[0].disabled = (this.value.trim().length == 0);
}).trigger('input');

DEMO

Answer 2

隐藏你的按钮（通过风格）

<label for="color" class="control-label col-xs-4"><p class="left">Color/s</p></label>
  <div class="col-xs-7">
    <input name="color" class="form-control req" autocomplete = "off" />
    <input type="button" value="Add Color" style="display:none" />

像这样添加JS

$( ".form-control" ).keypress(function() {
    $(this).next().show();
    $(this).unbind('keypress');
});

Answer 3

只使用CSS，您可以显示和隐藏具有所需属性的按钮。

input[name="color"]:valid + input[type="button"] {
   display: inline;  
}

input[name="color"]:invalid + input[type="button"] {
   display: none;  
}

<label for="color" class="control-label col-xs-4">
  <p class="left">Color/s</p>
</label>
<div class="col-xs-7">
  <input name="color" class="form-control req" autocomplete="off" required/>
  <input type="button" value="Add Color" />
</div>

Answer 4

你所要做的就是添加一个input监听器并检查输入是否为空。

＆＃13;

var button = $('input[type=button]');
button.hide();
//hide it at the beginning.
$('input[name=color]').on('input', function() {
  //If input changes
  if ($(this).val().length > 0) {
    //If it's not empty show it
    button.show();
  } else {
    //If it's empty hide it
    button.hide();
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="color" class="control-label col-xs-4">
  <p class="left">Color/s</p>
</label>
<div class="col-xs-7">
  <input name="color" class="form-control req" autocomplete="off" />
  <input type="button" value="Add Color" />

＆＃13;

Answer 5

使用onkeyup功能激活按钮

只有在您开始输入时才会出现按钮

5 个答案:

DEMO