javascript - 用jQuery移动元素

1-如果用户按下某个键，则我的跨度会在右侧贴图，如果他删除键，那么该跨度会在左侧进行贴图...问题是用户仍然可以按Delete键，代码不知道如何处理

2-我也希望根据所按的字母偏移量是完美的……（例如，“ a”的间距与“ i”的间距不同）。

一个主意 ？谢谢 ！

My codepen

$('.field__input').keydown(function(e) {
  if ($('.field__input').val().length > 0) {
    if (e.which != 8) { //= delete key
      $('.search__results').css('display', 'block').css('left', '+=20');
    } else {
      $('.search__results').css('left', '-=20');
    }
  } else {
    $('.search__results').css('display', 'none');
  }
});

.field--search {
  margin: 0 auto;
  padding: 10px 0;
  position: relative;
  width: 500px;
  .field__input {
    width: 100%;
  }
  .search__results {
    color: red;
    display: none;
    position: absolute;
    left: 0px;
    top: 10px;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="search" placeholder="Search..." class="field__input">
<span class="search__results">26</span>
<button class="search__delete"></button>

最佳答案

在您的第一个if语句中。 else参数应将左侧位置重新设置为原始位置。
忘记问题1，然后以不同的方式处理。


一种。创建一个空的跨度（显示：inline-block并将不透明度设置为0）

b。将其放在搜索结果之前。

每次按键时，用输入值更新新范围。这会将search__results范围推到单词大小的右侧。请记住不要在新跨度上设置宽度。这样，它会随着您的话而增长。

关于javascript - 用jQuery移动元素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42254296/