<!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框随输入的文字的多少自动调整宽度粗略版本的更多相关文章

  1. 函数式组件中实现Antd打开Modal后其Input框自动聚焦(focus)到文字的最后

    目前React使用函数式组件已经成为趋势, 如何把React函数式组件用好, 提高性能, 从而实现业务需求也成为了一种能力的体现......咳咳咳, 进入正题: 现实场景需求 我想实现这一个需求, 父 ...

  2. js—input框中输入数字,动态生成内容的方法

    项目中需要在前端实现: 用户输入数字n,动态生成n个元素,删除n,自动清空n个元素(如图一): 用户输入数字n,失焦生成n个元素,再聚焦修改n,自动清空n个元素(如图二): 图一: 图二: 需求一实现 ...

  3. input框限制输入金额

    HTML: <input type="tel" class="capital mui-input-clear" value="0.00" ...

  4. JS 限制input框的输入字数,并提示可输入字数

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  5. 使用正则限制input框只能输入数字/英文/中文等等

    常用HTML正则表达式 1.只能输入数字和英文的: 复制代码代码如下: <input onkeyup="value=value.replace(/[/W]/g,'') " o ...

  6. input框的输入限制

    1.输入数字 <input onKeyUp="value=value.replace(/[^\d|chun]/g,'')"> 2.只输入中文 <input typ ...

  7. 使用UIkit的uk-form-icon后input框无法输入的问题

    相关版本UIkit2.27.5 uikit.min.css默认使用uk-form-icon的属性pointer-events: none:因此表框无法点击. <style type=text/c ...

  8. javascript判断input框只能输入数字的方法

    javascript 只允许输入数字有很多方法,总结如下 1,只允许输入数字和小数点. <input onKeypress="return (/[\d.]/.test(String.f ...

  9. js控制input框只能输入数字和一位小数点和小数点后面两位小数

    <script language="JavaScript" type="text/javascript"> function clearNoNum( ...

随机推荐

  1. mysql 存储引擎入门

  2. mysql合并结果集

  3. jenkins + gitlab 快速搭建(docker-compose) 时间,时区 同步

    记录一下吧   算打一下 tag   最近在整得 swarm + jenkins 实现自动化部署 回滚 #构建jenkins 镜像 #dockerfile:      docker build -t  ...

  4. Golang的常量定义及使用案例

    Golang的常量定义及使用案例 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.常量的定义 package main import ( "fmt" ) fu ...

  5. 20200119日志 EPLAN高压房 VFD 单线图 心得

    提纲: EPLAN 画单线图的方法,可以先绘制原理图,然后在一个柜子里面的器件 用方框圈起来.方框名称一样.注意 一个工程里面的器件编号是唯一的. 断路器选型. PT 手车 接地刀作用     具体内 ...

  6. 九十二、SAP中ALV事件之六,复制一个标准工具栏到自己的程序

    一.我们来到SE41,点击复制状态按钮 二.点击复制状态后,弹出一个框框,上面是模板内容,下面是我们自己的程序 三.我们根据上一篇的标准模板内容,填好相应的模板和我们的程序的内容 三.点击复制按钮 五 ...

  7. ELK 安装Elasticsearch

    章节 ELK 介绍 ELK 安装Elasticsearch ELK 安装Kibana ELK 安装Beat ELK 安装Logstash ELK栈要安装以下开源组件: Elasticsearch Ki ...

  8. js 加密解密 TripleDES

    <!DOCTYPE html> <html lang="en">   <head>     <meta charset="UTF ...

  9. 实验3- 熟悉常用的 HBase 操作

        石家庄铁道大学信息科学与技术学院               实验报告 2018年----2019年  第一学期                       题目:  熟悉常用的 HBase ...

  10. exit(0)与exit(1)

    exit(0):正常运行程序并退出程序: exit(1):非正常运行导致退出程序: return():返回函数,若在主函数中,则会退出函数并返回一值. 详细说: 1. return返回函数值,是关键字 ...