input框随输入的文字的多少自动调整宽度粗略版本

最新推荐文章于 2023-09-12 10:26:30 发布

weixin_30781107

最新推荐文章于 2023-09-12 10:26:30 发布

阅读量1.9k

点赞数

文章标签： javascript 前端 ViewUI

原文链接：http://www.cnblogs.com/zeng-zhi/p/11114001.html

版权

<!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>