隐藏背景直到值改变答案

【问题标题】：Hide background until value change隐藏背景直到值改变
【发布时间】：2018-04-15 06:01:00
【问题描述】：

我希望隐藏此元素的背景，直到通过文本输入发生值更改。
我希望按钮的宽度随着添加的文本量（加上任何额外的填充）而增长。现在它正在自动填充其父容器的 100%。我不希望此元素填充其父容器宽度的 100%。

这是我现在拥有的：

var $divC = $('.button');

$('.buttonInput').bind('keyup change', function() {
    $divC.html(this.value);
    if(this.value.length > 0) {
           $('.button').css('display', 'block')
        } else {
           $('.button').css('display', 'none')
        }
});

.button {
  font-size: 18px;
  font-weight: 400;
  line-height: 110%;
  margin: 15px 0;
  background-color: blue;
  color: white;
  padding: 15px;
  letter-spacing: 1px;
  border-radius: 3px;
  text-align: center; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br><br>
<div class="button basic2"></div>
<br><br>
<form>Enter text:<br><input class="buttonInput"></form>

【问题讨论】：

标签： javascript html css

【解决方案1】：

将margin: auto; 和display: none; 添加到您的按钮并使用display : table 使宽度适合内容

var $divC = $('.button');

$('.buttonInput').bind('keyup change', function() {
    $divC.html(this.value);
    if(this.value.length > 0) {
           $('.button').css('display', 'table')
        } else {
           $('.button').css('display', 'none')
        }
});

.button {
  font-size: 18px;
  font-weight: 400;
  line-height: 110%;
  margin: 15px 0;
  background-color: blue;
  color: white;
  padding: 15px;
  letter-spacing: 1px;
  border-radius: 3px;
  text-align: center; 
  margin: auto;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br><br>
<div class="button basic2"></div>
<br><br>
<form>Enter text:<br><input class="buttonInput"></form>

【讨论】：