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'); 
});