解决的思路是动态修改css的width

参考:https://blog.csdn.net/lianzhang861/article/details/84306139中的方法一,

如果是input,用onkeydown,onkeyup配合使用

<input type="text" onkeydown="this.onkeyup();" onkeyup="this.size=(this.value.length>4?this.value.length:4);" size="">

如果是el-cascader的输入框

<el-cascader
id="el-cascader"
v-model.trim="formTemp.service"
:disabled="currentStep!='apply'"
:options="serviceOptions"
:props="{ expandTrigger: 'hover' }"
:show-all-levels="true"
separator="."
@change="handleServiceSelect"
>
</el-cascader>

在methods中定义如下 

updateElCascaderStyle(value) {
// 效果:项目名称的input框随着内容的长度而自适应,设置 el_cascader 标签的width
var el_cascader_element = document.querySelector('#el-cascader')
var length = value.join('.').length + 1
var num = length * 9 + 'px'
el_cascader_element.style.width = num
},  

这个 * 9 的9是测试出来的,因为样式不是直接作用到input上,所以和上面input的例子还有些不一样,还有上面的 + 1 ,也是这种情况

效果大致是可以的,只不过如果最后一位是数字,可以正常显示,如果最后是字母,那么可能会有一些多余的空白字符,如下图

数字的情况:

字母的情况:

上面的这个bug,和https://blog.csdn.net/lianzhang861/article/details/84306139里面说的类似,有数字的时候会特殊一些,原因:数字占font-size的大小不知道是啥规律?

input或者el-cascader的输入框随输入内容宽度自适应的更多相关文章

  1. input实时监听控制输入框的输入内容和长度,并进行提示和反馈

    一.前言 在MVVM模式下,有个双向数据绑定(data-binding)的优势,可以通过viewmodel实时的监听用户操作,也可以将model的改动实时的反馈到界面上. 那么,在传统的js操控DOM ...

  2. 类似智能购票的demo--进入页面后默认焦点在第一个输入框,输入内容、回车、right时焦点自动跳到下一个,当跳到select时,下拉选项自动弹出,并且可以按上下键选择,选择完成后再跳到下一个。

    要实现的效果:进入页面后默认焦点在第一个输入框,输入内容.回车.right时焦点自动跳到下一个,当跳到select时,下拉选项自动弹出,并且可以按上下键选择,选择完成后再跳到下一个. PS:自己模拟的 ...

  3. Python+Selenium自动化-清空输入框、输入内容、点击按钮

    Python+Selenium自动化-清空输入框.输入内容.点击按钮   1.输入内容 send_keys('valve'):输入内容valve #定位输入框 input_box = browser. ...

  4. vue使用动态渲染v-model输入框无法输入内容

    最近使用ElementUI框架,在动态渲染表单的时候,表单框无法输入内容,但是绑定model的数据是会发生变化 解决方法: 将动态生成的表单对象,深拷贝到 data 对象中 <el-date-p ...

  5. vue时时监听input输入框中 输入内容 写法

    Vue input 监听 使用 v-on:input="change" 实现即可 App.vue <template> <div> <md-field ...

  6. 解决Vue中element-ui输入框无法输入问题

    <el-input placeholder="请输入内容" v-model="input3" class="input-with-select& ...

  7. EditTextPreference点击后输入框显示隐藏内容,类似密码输入(转)

    http://bbs.anzhuo.cn/thread-928131-1-1.html EditTextPreference点击后输入框显示隐藏内容,类似密码输入... [复制链接]     aski ...

  8. 防御XSS攻击-encode用户输入内容的重要性

    一.开场先科普下XSS 跨站脚本攻击(Cross Site Scripting),为不和层叠样式表(Cascading Style Sheets, CSS)的缩写混淆,故将跨站脚本攻击缩写为XSS.恶 ...

  9. Android开发中,使用 EditText 输入内容,如何进行一键清空内容处理

    本文仅为个人的处理方式,希望能对您有所帮助,欢迎各位留言指正,抱拳了 1.text.xml示例: <?xml version="1.0" encoding="utf ...

随机推荐

  1. 基于Arduino和python的串口通信和上位机控制

    引言 经常的时候我们要实现两个代码之间的通信,比如说两个不同不同人写的代码要对接,例如将python指令控制Arduino控件的开关,此处使用串口通信是非常方便的,下面笔者将结合自己踩过的坑来讲述下自 ...

  2. Transformer模型---encoder

    一.简介 论文链接:<Attention is all you need> 由google团队在2017年发表于NIPS,Transformer 是一种新的.基于 attention 机制 ...

  3. K8s集群中设置harbor仓库认证

    一,获取harbor的登陆用户名和密码(demo_user/demo_pwd) 二,使用kubectl命令生成secret(不同的namespace要分别生成secret,不共用) kubectl c ...

  4. 09-webpack--配置less

    <!-- cnpm i less-loader less -D 要下载两个 在入口文件main.js文件中引入 import './css/index.less' webpack.config. ...

  5. 基于 Docker 的 MySQL 主从复制搭建

    出处:https://www.jianshu.com/p/ab20e835a73f

  6. Selenium获取页面指定元素个数

    测试需求: 获取页面中下拉框个数,并验证是否与预期个数一致 方法1:因下拉框的tagname属性值为select,可通过获取标签为select的元素来获取下拉框个数   List<WebElem ...

  7. 【使用篇二】SpringBoot整合mybatis(7)

    说明:使用SpringBoot+Mybatis+Jsp实现简单的用户增删查改 #用户表 DROP TABLE IF EXISTS `user`; CREATE TABLE `user` ( `) NO ...

  8. SPOJ - Triple Sums

    [传送门] FFT第一题! 构造多项式 $A(x) = \sum x ^ {s_i}$. 不考虑题目中 $i < j < k$ 的条件,那么 $A^3(x)$ 每一项对应的系数就是答案了. ...

  9. 动态规划 | 对输入进行hash处理的LIS 1045

    把序列M处理为有序序列,并且M不存在的序列要在A中删除. 对A进行了处理之后,执行LIS的操作(O(N^2)复杂度).当然可以优化为对数复杂度的,不过pat不卡这个. LCS解法:动态规划 | 保留重 ...

  10. 关于对STL容器重载运算符的问题

    注意:下文中vector数组指的是每个数组元素都是一个vector的数组 大部分有序STL容器都重载了小于号,且比较方式是对容器中元素进行字典序比较. 此时如果你写\(bool\ operator&l ...