jQuery通过CSS溢出截断文本

Question

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

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

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

例子：

我希望jQuery文本截断只Lorem Ips虽然值实际上是Lorem Ipsum

我怎么能这样做？

Answer 1

我有一个片段准备按照您的要求，感谢您的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" />

Answer 2

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