input长度随输入内容动态变化 input光标定位在最右侧
生活随笔
收集整理的這篇文章主要介紹了
input长度随输入内容动态变化 input光标定位在最右侧
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<input type="text" οnkeydοwn="this.onkeyup();" οnkeyup="this.size=(this.value.length>4?this.value.length:4);" size="4">?
<input type="text">的默認size就是20?
如果你在style里定義了width屬性,又要讓它的width根據內容來變化,兩個要求不就矛盾了嗎.所以這里不能在style里定義width屬性.
function len(s) { //獲取輸入文本長度,字符占一位,漢字兩位var l = 0;
var a = s.split("");
for (var i=0;i<a.length;i ) {
if (a[i].charCodeAt(0)<299) {
l ;
} else {
l =2;
}
}
return l;
}
或者將中文替換成兩個字符 var str_temp = $(".tag_input").val().replace(/[\u4e00-\u9fa5]/g, 'aa'); $(".tag_input").attr("size",str_temp.length); $(".tag_input").width("auto");
jq:
$( function (){ ??????????????? //propertychange監聽input里面的字符變化,屬性改變事件 ??????????????? $( '.zy-price' ).bind( 'input propertychange' ,? function () { ??????????????????? var? $ this? = $( this ); ??????????????????? console.log($ this ); ??????????????????? var? text_length = $ this .val().length; //獲取當前文本框的長度 ??????????????????? var? current_width = parseInt(text_length) *16; //該16是改變前的寬度除以當前字符串的長度,算出每個字符的長度 ??????????????????? console.log(current_width) ??????????????????? $ this .css( "width" ,current_width "px" ); ??????????????? }); ??????????? }) 實現input光標定位在最后一位: 方法:給input重新賦值 $(".tag_input").focus();$(".tag_input").val('');
$(".tag_input").val($(this).text());
總結
以上是生活随笔為你收集整理的input长度随输入内容动态变化 input光标定位在最右侧的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: HTML语义化的理解
- 下一篇: Html5和Css3扁平化风格网页