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 相关文章推荐
javascript中不等于的代码是什么怎么写
Dec 29 Javascript
JS计算网页停留时间代码
Apr 28 Javascript
jQuery幻灯片特效代码分享--鼠标滑过按钮时切换(2)
Nov 18 Javascript
jquery图片滚动放大代码分享(2)
Aug 28 Javascript
WordPress中利用AJAX异步获取评论用户头像的方法
Jan 08 Javascript
input输入框内容实时监测(附代码)
Aug 15 Javascript
JS实现HTML页面中动态显示当前时间完整示例
Jul 30 Javascript
深入浅析var,let,const的异同点
Aug 07 Javascript
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
Aug 28 jQuery
用WebStorm进行Angularjs 2开发(环境篇:Windows 10,Angular-cli方式)
Dec 05 Javascript
微信小程序点击图片实现长按预览、保存、识别带参数二维码、转发等功能
Jul 20 Javascript
vue 组件间的通信之子组件向父组件传值的方式
Jul 29 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 数据结构 算法 三元组 Triplet
2011/07/02 PHP
php设计模式之观察者模式的应用详解
2013/05/21 PHP
帝国cms目录结构分享
2015/07/06 PHP
Laravel 加载第三方类库的方法
2018/04/20 PHP
KindEditor在php环境下上传图片功能集成的方法示例
2020/07/20 PHP
高性能web开发 如何加载JS,JS应该放在什么位置?
2010/05/14 Javascript
基于jquery跨浏览器显示的file上传控件
2011/10/24 Javascript
弹出窗口并且此窗口带有半透明的遮罩层效果
2014/03/13 Javascript
require.js深入了解 require.js特性介绍
2014/09/04 Javascript
js实现透明度渐变效果的方法
2015/04/10 Javascript
JavaScript实现动态添加,删除行的方法实例详解
2015/07/02 Javascript
javascript带回调函数的异步脚本载入方法实例分析
2015/07/02 Javascript
JS实现可点击展开与关闭的左侧广告代码
2015/09/02 Javascript
JavaScript和JQuery获取DIV值的方法示例
2017/03/07 Javascript
纯js实现页面返回顶部的动画(超简单)
2017/08/10 Javascript
bootstrap轮播模板使用方法详解
2017/11/17 Javascript
详解在网页上通过JS实现文本的语音朗读
2019/03/28 Javascript
vue引入微信sdk 实现分享朋友圈获取地理位置功能
2019/07/04 Javascript
详解JavaScript中的数据类型,以及检测数据类型的方法
2020/09/17 Javascript
Python中函数及默认参数的定义与调用操作实例分析
2017/07/25 Python
Python自定义一个类实现字典dict功能的方法
2019/01/19 Python
NumPy统计函数的实现方法
2020/01/21 Python
django 利用Q对象与F对象进行查询的实现
2020/05/15 Python
深入分析python 排序
2020/08/24 Python
HTML5中新标签和常用标签详解
2014/03/07 HTML / CSS
澳大利亚女性快速时尚零售商:Ally Fashion
2018/04/25 全球购物
村干部培训班主持词
2014/03/28 职场文书
单位委托书范本
2014/04/04 职场文书
倡议书格式模板
2014/05/13 职场文书
2014年教师节座谈会发言稿
2014/09/10 职场文书
2014年销售内勤工作总结
2014/12/01 职场文书
男方婚礼答谢词
2015/01/20 职场文书
保送生自荐信范文
2015/03/26 职场文书
初中生活随笔
2015/08/15 职场文书
详解Python requests模块
2021/06/21 Python
Java使用jmeter进行压力测试
2021/07/09 Java/Android