input文本框自适应文本内容value宽度

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

一叶青果

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

阅读量1.5w

点赞数 1

CC 4.0 BY-SA版权

文章标签： input 自适应内容宽度输入框

本文链接：https://blog.youkuaiyun.com/weixin_43804382/article/details/84542732

本文介绍如何实现input输入框的宽度能够根据输入的文本内容自适应调整，确保文字完整显示，提高用户体验。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
   <input type="text" style="width: 100px ;font-size: 14px;" value="静静的敲代码" class="input_auto">
   <input type="text" style="width: 100px;font-size: 20px" value="算了，先找对象吧"  class="input_auto">
   <span  class="spanw"></span>
</body>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
  
  jQuery(document).ready(function($){
    // 第一次加载设置input宽度
    $('.input_auto').each(function(index, el) {
       textWidth($(this))
    });
    // 改变文本内容时重置宽度
    $('.input_auto').bind('input oninput', function() { 
       textWidth($(this))
    });

     function textWidth($this){ 
      // 获取当前input的value值和字体大小
       var inputVal=$this.val();
       var font=$this.css('font-size');
       //获取容器的宽度
       $(".spanw").text(inputVal).css('font-size',font);; 
       var width = $(".spanw").width();
       // 清空容器
       $(".spanw").text(''); 
       // 设置input宽度
       $this.css('width', width);
    };
   
  });

</script>
</html>