【功能】动态改变input输入框宽度

最新推荐文章于 2024-05-02 18:12:22 发布

俞小挺

最新推荐文章于 2024-05-02 18:12:22 发布

阅读量1.1k

点赞数 1

分类专栏： Layui+jQuery 文章标签： javascript css jquery html5

本文链接：https://blog.csdn.net/douyacai7822/article/details/118357857

版权

Layui+jQuery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" />
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/layui/2.6.8/layui.min.js"></script>
  <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
</head>

<body>
   <input type="text" name="1" placeholder="请输入" value="你好" autocomplete="off" class="layui-input"
    lay-verify="required">
   <input type="text" name="2" placeholder="请输入" value="天王盖地虎" autocomplete="off" class="layui-input"
    lay-verify="required">
   <input type="text" name="3" placeholder="请输入" value="我就是这条该最亮的崽" autocomplete="off" class="layui-input"
    lay-verify="required" size="10">
</body>

<!-- layui -->
<script type="text/javascript">
  layui.use(['transfer', 'laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element'], function () {
    var laydate = layui.laydate //日期
      , laypage = layui.laypage //分页
      , layer = layui.layer //弹层
      , table = layui.table //表格
      , carousel = layui.carousel //轮播
      , upload = layui.upload //上传
      , element = layui.element //元素操作 等等...
      , transfer = layui.transfer;

    // 初始化
    $('input').css({
      'width': function () {
        let em = $(this).css('font-size').split('px', 2)[0]
        return ($(this).val().length + 2.5) * em + 'px'
      }
    })
    // 动态监听
    $('input').on('keyup', function () {
      $(this).css({
        'width': function () {
          let em = $(this).css('font-size').split('px', 2)[0]
          return ($(this).val().length + 2.5) * em + 'px'
        }
      })
    })

  });
</script>


</html>