欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue實(shí)現(xiàn)input寬度隨文字長度自適應(yīng)操作

 更新時間：2020年07月29日 10:24:02   作者：ADZG-tuni  
這篇文章主要介紹了Vue實(shí)現(xiàn)input寬度隨文字長度自適應(yīng)操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

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

直接貼代碼

<div class="textcontain">
     <input
      type="text"
      v-model.number="item.cardComboMoney"
      maxlength="5"
      placeholder="設(shè)定數(shù)值"
      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'
    }
   }
  }
 },

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

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

問題描述：

input在輸入的時候，要能讓input的寬度隨著輸入的文字自動增寬。

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

思路：

設(shè)置一個隱藏的span，使其font屬性與input統(tǒng)一，然后獲取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寬度自適應(yīng)</title>
 <style>
  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;
  }
 </style>
</head>
 
<body>
 <!-- 思路：將文字內(nèi)容賦值給隱藏的span，然后將input的寬度設(shè)置為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實(shí)現(xiàn)input寬度隨文字長度自適應(yīng)操作就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論