为什么输入聚焦时会移动？答案

【问题标题】：Why does the input move when focused?为什么输入聚焦时会移动？
【发布时间】：2017-03-13 12:24:59
【问题描述】：

我有一个围绕输入和按钮的 div，每当输入聚焦时，它就会移动。我怎样才能让它停止移动？

这是我的html：

<div class="search">
  <div class="input-container">
    <input type="text" name="query" class="searchbar" placeholder="What do you want to learn about?" />
    <button type="submit" class="search-button">Search</button>
  </div>
</div>

这是我的 CSS：

body {
    margin: 10px;
}

input{
    padding: 0;
    border: 0;
  }

  .is-focused{
    border-style: solid;
    border-color: #986fa5;
  }

  input:focus{
    outline-width: 0px;
  }

  .search * {
        height: 35px;

    }

    /*.search-button{
        position: absolute;
    }*/

    .searchbar {
        width: 450px;
    }

这是我的 js/jquery：

$('input').focus(
function(){
    $('.input-container').addClass('is-focused');
}).blur(
function(){
    $('.input-container').removeClass('is-focused');
});

我还有一个小提琴here，您可以在其中看到输入在聚焦时移动。

【问题讨论】：

因为你使用了边框。边框将移动您的元素。查看使用大纲的答案，这不会移动您的元素。

标签： javascript jquery html css

【解决方案1】：

你可以改变

 .is-focused{
    border-style: solid;
    border-color: #986fa5;
  }

到

.is-focused{
    outline-style: solid;
    outline-color: #986fa5;
  }

可以看到here

【讨论】：

这行得通。边界怎么会让它移动呢？
@user3494047 基本上是因为边框会占用页面空间而轮廓不会。这是你不会马上知道的事情，但here 是一篇关于它的文章，here 是关于它的答案。

【解决方案2】：

使用大纲

 .is-focused{
    outline-style: solid;
    outline-color: #986fa5;
  }

演示：https://jsfiddle.net/04x6018h/

或使用负边距（不推荐）：

 .is-focused{
    border-style: solid;
    border-color: #986fa5;
    margin:-3px;
  }

https://jsfiddle.net/04x6018h/1/

或盒子阴影

 .is-focused {
   box-shadow: 0  0 0 3px #986fa5;
  }

https://jsfiddle.net/04x6018h/2/

【讨论】：

【解决方案3】：

这是因为边框的大小，你可以使用:before伪元素和position:absolute;来解决问题。

$('input').focus(function(){$('.input-container').addClass('is-focused');}).blur(function(){$('.input-container').removeClass('is-focused');});

body { margin: 10px; }

input {
    padding: 0;
    border: 0;
    text-indent: 5px;
}
input:focus{ outline-width: 0px; }

.is-focused { position:relative;}
.is-focused:before {
    content: '';
    position: absolute;
    top:0;left:0;bottom:0;right:0;
    border-style: solid;
    border-color: #986fa5;
}

.search * { height: 35px; }
.searchbar { width: 450px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="search">
  <div class="input-container">
    <input type="text" name="query" class="searchbar" placeholder="What do you want to learn about?" />
    <button type="submit" class="search-button">Search</button>
  </div>
</div>

【讨论】：

【解决方案4】：

border 将元素扩展为边框宽度，而outline 则不会。只需用边框替换你的轮廓，跳跃就会被移除。

$('input').focus(function() {
  $('.input-container').addClass('is-focused');
}).blur(function() {
  $('.input-container').removeClass('is-focused');
});

body {
  margin: 10px;
}
input {
  padding: 0;
  border: 0;
}
.is-focused {
  outline-style: solid;
  outline-color: #986fa5;
}
input:focus {
  outline-width: 0px;
}
.search * {
  height: 35px;
}
/*.search-button{
        position: absolute;
    }*/

.searchbar {
  width: 450px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="search">
  <div class="input-container">
    <input type="text" name="query" class="searchbar" placeholder="What do you want to learn about?" />
    <button type="submit" class="search-button">Search</button>
  </div>
</div>

【讨论】：