电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術文章
文章詳情頁

Vue實現input寬度隨文字長度自適應操作

瀏覽:133日期:2022-12-24 10:02:13

Vue實現input寬度隨文字長度自適應操作

業務需求,輸入文字,后面的元要緊隨其后,奈何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’ : > <span 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, Helvetica, sans-serif; } #my-span { position: absolute; left: 0; visibility: hidden; } </style></head> <body> <!-- 思路:將文字內容賦值給隱藏的span,然后將input的寬度設置為span的寬度 --> <span id='my-span'></span> <input type='text' 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寬度隨文字長度自適應操作就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持好吧啦網。

標簽: Vue
相關文章:
主站蜘蛛池模板: LCD3D打印机|教育|桌面|光固化|FDM3D打印机|3D打印设备-广州造维科技有限公司 | CE认证_FCC认证_CCC认证_MFI认证_UN38.3认证-微测检测 CNAS实验室 | 知企服务-企业综合服务(ZiKeys.com)-品优低价、种类齐全、过程管理透明、速度快捷高效、放心服务,知企专家! | 灌装封尾机_胶水灌装机_软管灌装封尾机_无锡和博自动化机械制造有限公司 | 不锈钢轴流风机,不锈钢电机-许昌光维防爆电机有限公司(原许昌光维特种电机技术有限公司) | 上海深蓝_缠绕机_缠膜机-上海深蓝机械装备有限公司 | 杭州厂房降温,车间降温设备,车间通风降温,厂房降温方案,杭州嘉友实业爽风品牌 | 温湿度记录纸_圆盘_横河记录纸|霍尼韦尔记录仪-广州汤米斯机电设备有限公司 | 北京网络营销推广_百度SEO搜索引擎优化公司_网站排名优化_谷歌SEO - 北京卓立海创信息技术有限公司 | 河南不锈钢水箱_地埋水箱_镀锌板水箱_消防水箱厂家-河南联固供水设备有限公司 | 超声骨密度仪-骨密度检测仪-经颅多普勒-tcd仪_南京科进实业有限公司 | 冲击式破碎机-冲击式制砂机-移动碎石机厂家_青州市富康机械有限公司 | RTO换向阀_VOC高温阀门_加热炉切断阀_双偏心软密封蝶阀_煤气蝶阀_提升阀-湖北霍科德阀门有限公司 | 深圳公司注册-工商注册公司-千百顺代理记账公司 | 贴片电感_贴片功率电感_贴片绕线电感_深圳市百斯特电子有限公司 贴片电容代理-三星电容-村田电容-风华电容-国巨电容-深圳市昂洋科技有限公司 | 乳化沥青设备_改性沥青设备_沥青加温罐_德州市昊通路桥工程有限公司 | 字典-新华字典-在线字典查字-字典趣 | 六维力传感器_六分量力传感器_模腔压力传感器-南京数智微传感科技有限公司 | 碳纤维复合材料制品生产定制工厂订制厂家-凯夫拉凯芙拉碳纤维手机壳套-碳纤维雪茄盒外壳套-深圳市润大世纪新材料科技有限公司 | 猎头招聘_深圳猎头公司_知名猎头公司 | 建筑消防设施检测系统检测箱-电梯**检测仪器箱-北京宇成伟业科技有限责任公司 | 大型果蔬切片机-水果冬瓜削皮机-洗菜机切菜机-肇庆市凤翔餐饮设备有限公司 | 汽车润滑油厂家-机油/润滑油代理-高性能机油-领驰慧润滑科技(河北)有限公司 | 月嫂_保姆_育婴_催乳_母婴护理_产后康复_养老护理-吉祥到家家政 硫酸亚铁-聚合硫酸铁-除氟除磷剂-复合碳源-污水处理药剂厂家—长隆科技 | 酒店厨房设计_中央厨房设计_北京商用厨房设计公司-奇能商厨 | 煤矿支护网片_矿用勾花菱形网_缝管式_管缝式锚杆-邯郸市永年区志涛工矿配件有限公司 | 浙江自考_浙江自学考试网| 深圳市源和塑胶电子有限公司-首页 | 权威废金属|废塑料|废纸|废铜|废钢价格|再生资源回收行情报价中心-中废网 | 深圳市宏康仪器科技有限公司-模拟高空低压试验箱-高温防爆试验箱-温控短路试验箱【官网】 | 定制/定做衬衫厂家/公司-衬衫订做/订制价格/费用-北京圣达信 | T恤衫定做,企业文化衫制作订做,广告T恤POLO衫定制厂家[源头工厂]-【汉诚T恤定制网】 | 卫生人才网-中国专业的医疗卫生医学人才网招聘网站! | 艾默生变频器,艾默生ct,变频器,ct驱动器,广州艾默生变频器,供水专用变频器,风机变频器,电梯变频器,艾默生变频器代理-广州市盟雄贸易有限公司官方网站-艾默生变频器应用解决方案服务商 | 圣才学习网-考研考证学习平台,提供万种考研考证电子书、题库、视频课程等考试资料 | 山东风淋室_201/304不锈钢风淋室净化设备厂家-盛之源风淋室厂家 翻斗式矿车|固定式矿车|曲轨侧卸式矿车|梭式矿车|矿车配件-山东卓力矿车生产厂家 | 政府回应:200块在义乌小巷能买到爱情吗?——揭秘打工族省钱约会的生存智慧 | 流程管理|流程管理软件|企业流程管理|微宏科技-AlphaFlow_流程管理系统软件服务商 | 高楼航空障碍灯厂家哪家好_航空障碍灯厂家_广州北斗星障碍灯有限公司 | 深圳离婚律师咨询「在线免费」华荣深圳婚姻律师事务所专办离婚纠纷案件 | 热缩管切管机-超声波切带机-织带切带机-无纺布切布机-深圳市宸兴业科技有限公司 |