javascript - 隐藏背景直到值改变

Question

1. 我想隐藏此元素的背景，直到通过文本输入更改值为止。

2. 我希望按钮的宽度随着添加的文本量(加上任何额外的填充)而增加。现在它会自动填充 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>

Answer 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>