vue设置输⼊框输⼊长度_Vue实现input宽度随⽂字长度⾃适应
操作
业务需求，输⼊⽂字，后⾯的元要紧随其后，奈何input默认是有宽度，我想要达到，输⼊⽂字，动态改变input的宽度，试了很多⽅法，⽬前⾃⼰琢磨⼀种，有遇到问题的可以参考⼀下，
直接贴代码
type="text"
v-model.number="item.cardComboMoney"
maxlength="5"
placeholder="设定数值"
οninput="place(/^(0+)|[^\d]+/g,'')"
:disabled='disabled'
:
>
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'
}
}
}
},
利⽤计算属性，计算当前字体的长度，我这⾥最多允许输⼊5个字符的长度，所以这样计算影响不⼤
补充知识：input宽度⾃适应(解决⽂字占位宽度不同所引起的问题)
问题描述：
input在输⼊的时候，要能让input的宽度随着输⼊的⽂字⾃动增宽。
思路1：获取⽂字的内容，然后通过⽂字.length * font-size计算⽂字的宽度，但是由于⽂字“i”与“中”显然占位宽度不同⽽引起宽度差
思路：
设置⼀个隐藏的span，使其font属性与input统⼀，然后获取span的宽度，赋值给input
input宽度⾃适应
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;
input框禁止输入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实现input宽度随⽂字长度⾃适应操作就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持脚本之家。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。