input框随输入的文字的多少自动调整宽度粗略版本
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
#demo {
padding: 0;
border: 0;
color: rgba(40, 99, 243, 1);
background-color: transparent;
border-bottom: 1px solid #333;
width: 90px;
-webkit-appearance: textfield;
-webkit-writing-mode: horizontal-tb !important;
-webkit-rtl-ordering: logical;
text-rendering: auto;
display: inline-block;
overflow: visible;
outline: none;
font-family: 微软雅黑;
font-size: 14px;
text-align: center;
}
</style> <body>
<input id="demo" type="text">
</body>
<script>
var demo = document.getElementById('demo')
demo.addEventListener('input', function () { var n = document.createElement('span');
n.style.display = "inline-block"
n.style.whiteSpace = "pre"
n.style.maxWidth = "100%"
n.style.fontSize = "14px"
n.style.fontFamily = "微软雅黑"
n.innerHTML = demo.value;
demo.parentNode.insertBefore(n, demo.nextSibling);
var spanW = n.getBoundingClientRect().width;
demo.parentNode.removeChild(n) demo.style.width = spanW + 'px' })
</script> </html>
input框随输入的文字的多少自动调整宽度粗略版本的更多相关文章
- 函数式组件中实现Antd打开Modal后其Input框自动聚焦(focus)到文字的最后
目前React使用函数式组件已经成为趋势, 如何把React函数式组件用好, 提高性能, 从而实现业务需求也成为了一种能力的体现......咳咳咳, 进入正题: 现实场景需求 我想实现这一个需求, 父 ...
- js—input框中输入数字,动态生成内容的方法
项目中需要在前端实现: 用户输入数字n,动态生成n个元素,删除n,自动清空n个元素(如图一): 用户输入数字n,失焦生成n个元素,再聚焦修改n,自动清空n个元素(如图二): 图一: 图二: 需求一实现 ...
- input框限制输入金额
HTML: <input type="tel" class="capital mui-input-clear" value="0.00" ...
- JS 限制input框的输入字数,并提示可输入字数
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- 使用正则限制input框只能输入数字/英文/中文等等
常用HTML正则表达式 1.只能输入数字和英文的: 复制代码代码如下: <input onkeyup="value=value.replace(/[/W]/g,'') " o ...
- input框的输入限制
1.输入数字 <input onKeyUp="value=value.replace(/[^\d|chun]/g,'')"> 2.只输入中文 <input typ ...
- 使用UIkit的uk-form-icon后input框无法输入的问题
相关版本UIkit2.27.5 uikit.min.css默认使用uk-form-icon的属性pointer-events: none:因此表框无法点击. <style type=text/c ...
- javascript判断input框只能输入数字的方法
javascript 只允许输入数字有很多方法,总结如下 1,只允许输入数字和小数点. <input onKeypress="return (/[\d.]/.test(String.f ...
- js控制input框只能输入数字和一位小数点和小数点后面两位小数
<script language="JavaScript" type="text/javascript"> function clearNoNum( ...
随机推荐
- Educational Codeforces Round 64 选做
感觉这场比赛题目质量挺高(A 全场最佳),难度也不小.虽然 unr 后就懒得打了. A. Inscribed Figures 题意 给你若干个图形,每个图形为三角形.圆形或正方形,第 \(i\) 个图 ...
- IDEA快速升级模块版本号
使用场景 一个多模块的项目中,在功能用重大更新后,需要升级版本号,如果不使用工具,需要手动更改每个pom.xml文件,而使用工具,就可以非常快速的完成版本号的更改. 基本步骤 0. idea执行ma ...
- win10热键体验
Alt+Tab: 横向显示正在执行的进程 Win+Tab: 3D形式展示正在执行的进程 Win+D:返回桌面(逃领导查电脑和放窥屏尴尬) Win+R: run(直接打开文件开始运行) crtl+Alt ...
- 解决Elasticsearch索引只读
今天添加索引时发现kibana添加索引不生效,页面也没有报错,没有创建成功只是一闪而过. 另外发现各项目日志与当前时间差异很大,filebeat一直报错io timeout 具体报错如下: fileb ...
- c++链表演示
#include<iostream> #include<string.h> #include<conio.h> using namespace std; #defi ...
- 指令——df
df是disk free 的简称,这个指令的功能和作用是查看磁盘空间. 可以加上 -h 的选项,来提高可读性. [he@localhost ~]$ df -h文件系统(磁盘名称) 总容量 ...
- JPA#Interfaces总结
_开局一张图,内容全靠编 震惊:某小白熟练使用了JpaRepository和JpaSpecificationExecutor,就在简历上写下了,精通SpringData Jpa. 震惊,如果想熟练的使 ...
- 051-PHP求余运算
<?php $x=10%5; //进行求余运算 $y=10%3; //进行求余运算 $z=10%6; //进行求余运算 echo $x; //输出变量x的值 echo $y; //输出变量y的值 ...
- mysql union 和union all
http://www.w3school.com.cn/sql/sql_union.asp
- TypeScript 文件引入 Html (ts import html webpack)
我们的目标是把html引入ts文件,webpack打包时就能把html打进js文件,减少文件加载啦 1 安装 text-loader npm install text-loader --save-de ...