業(yè)務(wù)需求，輸入文字，后面的元要緊隨其后，奈何input默認(rèn)是有寬度，我想要達(dá)到，輸入文字，動(dòng)態(tài)改變input的寬度,試了很多方法，目前自己琢磨一種，有遇到問(wèn)題的可以參考一下，

直接貼代碼

type="text"

v-model.number="item.cardComboMoney"

maxlength="5"

placeholder="設(shè)定數(shù)值"

οninput="value=value.replace(/^(0+)|[^\d]+/g,'')"

:disabled='disabled'

:style="{width:text(item.cardComboMoney)}"

>

class="textshow"

v-if="item.cardComboMoney!=0&&item.cardComboMoney!=''"

>元

computed: {

text () {

return function (value) {

if (value == '' || value == 0) {

return '100%'

} else {

return String(value).length * 0.32 + 'rem'

}

}

}

},

利用計(jì)算屬性，計(jì)算當(dāng)前字體的長(zhǎng)度，我這里最多允許輸入5個(gè)字符的長(zhǎng)度，所以這樣計(jì)算影響不大

補(bǔ)充知識(shí)：input寬度自適應(yīng)(解決文字占位寬度不同所引起的問(wèn)題)

問(wèn)題描述：

input在輸入的時(shí)候，要能讓input的寬度隨著輸入的文字自動(dòng)增寬。

思路1：獲取文字的內(nèi)容，然后通過(guò)文字.length * font-size計(jì)算文字的寬度，但是由于文字“i”與“中”顯然占位寬度不同而引起寬度差

思路：

設(shè)置一個(gè)隱藏的span，使其font屬性與input統(tǒng)一，然后獲取span的寬度，賦值給input

input寬度自適應(yīng)

body {

font-size: 16px;

font-family: Arial, Helvetica, sans-serif;

}

#my-input {

width: 20px;

padding: 0;

font-size: 16px;

font-family: Arial, Helvetica, sans-serif;

}

#my-span {

position: absolute;

left: 0;

visibility: hidden;

}

function changeWidth() {

var mySpan = $("#my-span");

var myInput = $("#my-input");

mySpan.html(myInput.val()); //給span賦值

if (mySpan.width() > 20) {

myInput.css('width', mySpan.width());

}

}

以上這篇Vue實(shí)現(xiàn)input寬度隨文字長(zhǎng)度自適應(yīng)操作就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

總結(jié)

以上是生活随笔為你收集整理的vue设置输入框输入长度_Vue实现input宽度随文字长度自适应操作的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。