Vue实现input宽度随文字长度自适应操作


Posted in Javascript onJuly 29, 2020

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'
      :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, 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" 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宽度随文字长度自适应操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
可输入的下拉框
Jun 19 Javascript
EASYUI TREEGRID异步加载数据实现方法
Aug 22 Javascript
javaScript 删除字符串空格多种方法小结
Oct 24 Javascript
基于jquery实现导航菜单高亮显示(两种方法)
Aug 23 Javascript
HTML中setCapture、releaseCapture 使用方法浅析
Sep 25 Javascript
javascript判断firebug是否开启的方法
Nov 23 Javascript
Angularjs处理页面闪烁的解决方法
Mar 09 Javascript
微信小程序WebSocket实现聊天对话功能
Jul 06 Javascript
vue使用echarts图表的详细方法
Oct 22 Javascript
js中Array对象的常用遍历方法详解
Jan 17 Javascript
使用p5.js临摹动态图形
Oct 23 Javascript
jdk1.8+vue elementui实现多级菜单功能
Sep 24 Javascript
vue 判断元素内容是否超过宽度的方式
Jul 29 #Javascript
在vue中实现给每个页面顶部设置title
Jul 29 #Javascript
vue实现移动端项目多行文本溢出省略
Jul 29 #Javascript
ElementUI 修改默认样式的几种办法(小结)
Jul 29 #Javascript
Element中Slider滑块的具体使用
Jul 29 #Javascript
vue 实现超长文本截取,悬浮框提示
Jul 29 #Javascript
javascript实现移动端触屏拖拽功能
Jul 29 #Javascript
You might like
PHP CURL模拟登录新浪微博抓取页面内容 基于EaglePHP框架开发
2012/01/16 PHP
Yii Framework框架获取分类下面的所有子类方法
2014/06/20 PHP
php多线程并发实现方法
2016/09/30 PHP
PHP 验证身份证是否合法的函数
2017/02/09 PHP
PHP使用imagick扩展实现合并图像的方法
2017/04/25 PHP
tp框架(thinkPHP)实现三次登陆密码错误之后锁定账号功能示例
2018/05/24 PHP
使用PHP+Redis实现延迟任务,实现自动取消订单功能
2019/11/21 PHP
通过jQuery打造支持汉字,拼音,英文快速定位查询的超级select插件
2010/06/18 Javascript
JS函数的几种定义方式分析
2015/12/17 Javascript
JS递归遍历对象获得Value值方法技巧
2016/06/14 Javascript
jQuery中JSONP的两种实现方式详解
2016/09/26 Javascript
js制作支付倒计时页面
2016/10/21 Javascript
Bootstrap CSS组件之下拉菜单(dropdown)
2016/12/17 Javascript
angular十大常见问题
2017/03/07 Javascript
详解从Vue.js源码看异步更新DOM策略及nextTick
2017/10/11 Javascript
JavaScript累加、迭代、穷举、递归等常用算法实例小结
2018/05/08 Javascript
javascript移动端 电子书 翻页效果实现代码
2019/09/07 Javascript
JS 数组基本用法入门示例解析
2020/01/16 Javascript
VUE-ElementUI 自定义Loading图操作
2020/11/11 Javascript
[01:15:12]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#4Newbee VS CDEC
2016/03/03 DOTA
详解pandas安装若干异常及解决方案总结
2019/01/10 Python
Python字符串格式化f-string多种功能实现
2020/05/07 Python
Python数据库封装实现代码示例解析
2020/09/05 Python
Python通过Schema实现数据验证方式
2020/11/12 Python
美国市场上最实惠的送餐服务:Dinnerly
2018/03/18 全球购物
北京泡泡网网络有限公司.net面试题
2012/07/17 面试题
皮肤科医师岗位职责
2013/12/04 职场文书
幼儿园开学寄语
2014/04/03 职场文书
中班幼儿评语大全
2014/04/30 职场文书
秋天的图画教学反思
2014/05/01 职场文书
车贷收入证明范本
2014/09/14 职场文书
工作表扬信范文
2015/01/17 职场文书
拾金不昧表扬信怎么写
2015/05/04 职场文书
2016年共产党员个人承诺书
2016/03/24 职场文书
JS异步堆栈追踪之为什么await胜过Promise
2021/04/28 Javascript
浅谈Redis 中的过期删除策略和内存淘汰机制
2022/04/03 Redis