javascript - 使用 jQuery 移动元素

标签 javascript jquery css

1 - 如果用户按下一个键,我的跨度贴在右边,如果他删除键,跨度贴在左边......问题是用户仍然可以按下删除键,而且我的代码不知道如何处理它,

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>

最佳答案

  1. 在您的第一个 if 语句中。 else 参数应将左侧位置设置回原来的位置。

  2. 忘记问题 1 并以不同的方式处理它。

一个。创建一个空跨度(显示:内联 block 并将不透明度设置为 0)

将它放在您的 search__results 之前。

每次按键都会用输入的值更新新的跨度。这会将 search__results 范围向右推到单词的大小。记住不要在新跨度上设置宽度。这样它就会随着你的话而成长。

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

相关文章:

javascript - ajax 运行时加载显示模式

html - CSS 将 div 显示为表格

javascript - 如何使用 ScrollMagic 固定和重叠多个元素?

javascript - 带参数的回调函数

javascript - WinJS DOM 加载

javascript - 如果/否则 jQuery : else statement not working

javascript - 如何等待多个图像加载到 Canvas 中并转换为base64?

c# - 此场景的 Web 窗体表格控件

jquery - http ://itstimefor. skype.com 背后的技术是什么

javascript - 如何在选择器级别和 react native 值中存储js对象?