jQuery通过CSS溢出截断文本

Question

我想通过屏幕上字母的可用空格截断input值。

例如，如果我的input字段只能包含5个字母，之后输入'向右滚动'（溢出）我希望jQuery仅限制为5个字母，因为这是可用的可见空间用户。

底线 - 我希望jQuery根据输入的溢出截断为可见字母，并删除不可见的字母。

示例：

我希望jquery只将文本截断为Lorem Ips，尽管该值实际为Lorem Ipsum

我该怎么做？

Answer 1

$(document).ready(function(){
    $("#id_of_textbox").attr('maxlength','5');
});

Answer 2

我已根据您的要求准备了一个代码段，感谢this codepen snippet

的作者

如果您认为此答案有帮助，请向上述codepen代码段的作者表示赞赏。

///////////////////////////////////////////////
// Source: https://codepen.io/Momciloo/pen/bpyMbB
///////////////////////////////////////////////
$.fn.textWidth = function(text, font) {

  if (!$.fn.textWidth.fakeEl) $.fn.textWidth.fakeEl = $('<span>').hide().appendTo(document.body);

  $.fn.textWidth.fakeEl.text(text || this.val() || this.text() || this.attr('placeholder')).css('font', font || this.css('font'));

  return $.fn.textWidth.fakeEl.width();
};
///////////////////////////////////////////////

$("input").on("input", function(e) {
  var tWidth = $(this).textWidth(),
      cWidth = $(this).width();
  if (tWidth > cWidth) {
    $(this).val($(this).data("val"));
  } else {
    $(this).data("val", $(this).val());
  }
});

input {
  clear: both;
  float: left;
}

.i1 {
  width: 12em;
}

.i2 {
  width: 6em;
}

.i3 {
  width: 2em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="i1" />
<input type="text" class="i2" />
<input type="text" class="i3" />