我想通過屏幕上字母的可用空間截斷值input
。jQuery通過CSS溢出截斷文本
例如,如果我的input
字段只能包含5個字母,然後輸入'滾動'到右邊(溢出)我希望jQuery限制爲5個字母,因爲這是用戶可用和可見的空間。
底線 - 我想根據輸入的溢出截斷可見的字母,並刪除不可見的字母。
例子:
我希望jQuery文本截斷只Lorem Ips
雖然值實際上是Lorem Ipsum
我怎麼能這樣做?
我想通過屏幕上字母的可用空間截斷值input
。jQuery通過CSS溢出截斷文本
例如,如果我的input
字段只能包含5個字母,然後輸入'滾動'到右邊(溢出)我希望jQuery限制爲5個字母,因爲這是用戶可用和可見的空間。
底線 - 我想根據輸入的溢出截斷可見的字母,並刪除不可見的字母。
例子:
我希望jQuery文本截斷只Lorem Ips
雖然值實際上是Lorem Ipsum
我怎麼能這樣做?
我有一個片段準備按照您的要求,感謝您的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" />
正是我在找的東西,謝謝! – Broshi
$(document).ready(function(){
$("#id_of_textbox").attr('maxlength','5');
});
我有數以百計的輸入,每個都有不同的寬度..所以最大長度是不可能的 – Broshi
@Broshi:你可以分享你的html –
你試過了'maxlength'屬性? '' –
顯示您的代碼。 –
maxlength不是一個選項,因爲我有很多不同寬度的輸入 – Broshi