如何在父容器中使用CSS或JavaScript移動div

Question

我正在嘗試使用提供自動完成功能的Bootstrap插件 。 盡管此插件可以正常工作，但有時當用戶在文本框的邊框附近輸入內容時，自動填充div會超出文本框的范圍。 有關更多信息，請參見下圖。

如何使用CSS或JavaScript確保自動Comedivte div永遠不會超出文本框？

Answer 1

您可以加入show事件並檢查彈出窗口是否接近textarea的右邊界（或您希望實施的任何規則）。 如果是，則更改下拉菜單的位置，使其顯示在插入符號的左側：

onshow: function (e) {
  var $dropdown = this.$dropdown.find('.dropdown-menu');
  var textAreaWidth = this.$element.width();
  var dropdownWidth = $dropdown.width();
  var dropdownLeft = $dropdown.position().left;

  // display left of caret if menu gets near right textarea border
  if (dropdownLeft + dropdownWidth >= textAreaWidth)
  {
    $dropdown.css({left: dropdownLeft - dropdownWidth});
  }
}

完整演示： https : //jsfiddle.net/dowxo2jk/1/