Vue實現input寬度隨文字長度自適應操作
阿新 • • 發佈：2020-07-30
業務需求，輸入文字，後面的元要緊隨其後，奈何input預設是有寬度，我想要達到，輸入文字，動態改變input的寬度,試了很多方法，目前自己琢磨一種，有遇到問題的可以參考一下，
直接貼程式碼
<div class="textcontain">
<input
type="text"
v-model.number="item.cardComboMoney"
maxlength="5"
placeholder="設定數值"
oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"
:disabled='disabled'
:style="{width:text(item.cardComboMoney)}"
>
<span
class="textshow"
v-if="item.cardComboMoney!=0&&item.cardComboMoney!=''"
>元</span>
</div>
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<title>input寬度自適應</title>
<style>
body {
font-size: 16px;
font-family: Arial,Helvetica,sans-serif;
}
#my-input {
width: 20px;
padding: 0;
font-size: 16px;
font-family: Arial,sans-serif;
}
#my-span {
position: absolute;
left: 0;
visibility: hidden;
}
</style>
</head>
<body>
<!-- 思路：將文字內容賦值給隱藏的span，然後將input的寬度設定為span的寬度 -->
<span id="my-span"></span>
<input type="text" id="my-input" oninput="changeWidth()">
<script>
function changeWidth() {
var mySpan = $("#my-span");
var myInput = $("#my-input");
mySpan.html(myInput.val()); //給span賦值
if (mySpan.width() > 20) {
myInput.css('width',mySpan.width());
}
}
</script>
</body>
</html>以上這篇Vue實現input寬度隨文字長度自適應操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。