<!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. 嵊州普及Day2T1

    题意:对于给出的数列,有多少数可表示为另两数的和. 思路:先排个序,桶排思路.以一个数组储蓄所有出现的和.最后循环判断是否b[i]>0. 见代码: #include<iostream> ...

  2. 开发者说 | 云+AI赋能心电医疗领域的应用

    以"医工汇聚 智竞心电"为主题的首届中国心电智能大赛自2019年1月1日启动全球招募起,共吸引总计545支来自世界各地的医工结合团队,308支团队近780名选手通过初赛资格审查,经 ...

  3. 载域和运行域的理解（ARM程序是怎么运行的）

    对ARM加载域和运行域的理解 一般而言,一个程序包括只读的代码段和可读写的数据段.在ARM的集成开发环境中,只读的代码段和常量被称作RO段(ReadOnly):可读写的全局变量和静态变量被称作RW段( ...

  4. POJ 1961：Period

    Period Time Limit: 3000MS Memory Limit: 30000K Total Submissions: 14280 Accepted: 6773 Description F ...

  5. DNS原理和智能DNS及CDN

    CDN是什么 CDN(Content Delivery Network)是内容分发网络. 作用: 使用户可以就近取的所需要的内容,加速用户访问网站资源的速度.物理距离更近,响应速度更快.拦截部分网络请 ...

  6. esxi 主机用户功能说明

    1.  root 用户 默认情况下,每个 ESXi 主机都有一个具有管理员角色的 root 用户帐户.该 root 用户帐户可用于本地管理,并可用于将主机连接到 vCenter Server. 此公共 ...

  7. R 读取excel的方法

    1.加载 readxl 包,利用 reade_excel() 函数 install.packages("readxl") library(readxl) data = read_e ...

  8. realme发布会将于本周三在北京·幻艺术举行

    5月13日消息,realme宣布将于5月15日(本周三)在北京·幻艺术中心发布realme X. 根据官方公布的海报,realme X采用了升降全面屏方案,无挖孔.无刘海.无水滴,支持屏幕指纹识别,正 ...

  9. npm、yarn 简单使用记录

    npm.yarn常用命令记录,后续会陆续补充... 经过使用发现yarn再下包是速度快,所以日常以yarn指令应用为主 npm查看仓库地址:npm config get registrynpm设置淘宝 ...

  10. div自动适应高度

    div高度100%<!DOCTYPE html> <html> <head></head> <body> <div id=" ...