input文本框自适应文本内容宽度
<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title>input文本框自适应文本内容宽度</title>

</head>

<body>

    <input type="text" id="t1" value="哈哈哈哈哈哈哈哈哈哈哈哈哈或或" />

    <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

    <script>

        $(function () {

            var text = $("#t1");

            textWidth(text);

        });

        function textWidth($this) {

            var inputVal = $this.val();

            var fontSize = $this.css('font-size');

            var span = document.createElement("span");

            document.body.appendChild(span);

            var $span = $(span);

            $span.text(inputVal).css('font-size', fontSize).hide();

            var width = $span.width();

            $this.css('width', width);

        };

    </script>

</body>

</html>

参考： https://blog.csdn.net/weixin_43804382/article/details/84542732

input文本框自适应文本内容宽度的更多相关文章

  1. html5 textarea 文本框根据输入内容自适应高度

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  2. Jquery实现 TextArea 文本框根据输入内容自动适应高度

    原文 Jquery实现 TextArea 文本框根据输入内容自动适应高度 在玩微博的时候我们可能会注意到一个细节就是不管是新浪微博还是腾讯微博在转发和评论的时候给你的默认文本框的高度都不会很高,这可能 ...

  3. select()事件默认选中文本框的全部内容，并改变其背景色和文字颜色

    1.select()事件默认选中文本框的全部内容 拿到input标签的节点,调用select()方法即可.但是我做的vue项目中调用了此方法有一个bug,单次点击会全选内容,双次点击的时候全选会闪一下 ...

  4. DEV中dx:ASPxPopupControl 控件的使用（在窗口关闭或隐藏时，清楚文本框中的内容）

    //在窗口关闭或隐藏时,清楚文本框中的内容(核心代码) function(s, e) { ASPxClientEdit.ClearGroup('entryGroup'); } <asp:Cont ...

  5. JS事件 内容选中事件（onselect）选中事件，当文本框或者文本域中的文字被选中时，触发onselect事件，同时调用的程序就会被执行。

    内容选中事件(onselect) 选中事件,当文本框或者文本域中的文字被选中时,触发onselect事件,同时调用的程序就会被执行. 如下代码,当选中用户文本框内的文字时,触发onselect 事件, ...

  6. 使input文本框随其中内容而变化长度的方法

    最近在做商城的前端界面,遇到一个问题,就是使input的宽度能随着输入的内容而跟着变化,刚开始的时候用的是change事件,但是change事件要失去焦点之后才会出现效果,但是我要的是能实现边输入边改 ...

  7. 使用jquery清空input 文本框中的内容

    只需要将文本框的值置为空即可: function resetBtn(){ $("#name").val(""); }

  8. 修改placeholder提示内容的颜色以及文本框输入文字内容的颜色

    一般表单文本框提示信息:placeholder=" ",默认颜色是灰色的,输入文本信息也是默认为黑色的,如图所示: 修改placeholder提示内容的颜色关键代码及实现: 实现输 ...

  9. JS控制文本框输入的内容

    总而言之:   先在‘<input>’ 里输入      onkeyup="value=value.replace(/[^\X]/g,'')" 然后在(/[\X]/g, ...

随机推荐

  1. jmeter-BeanShell PreProcessor的使用

    BeanShell简介 BeanShell是一个小型嵌入式Java源代码解释器,具有对象脚本语言特性,能够动态地执行标准JAVA语法.在BeanShell中,我们可以使用java语言自定义函数来处理特 ...

  2. LINUX 怎么实现root和普通用户的切换及怎么更改root密码

    在linux系统中执行什么命令后可以使$变为#?     先说下$和#在linux系统终端(命令行)中通常代表的什么:$打头的表示这不是在root用户(管理员用户)下执行的命令#打头的和前者相反,即r ...

  3. 再有人问你HashMap，把这篇文章甩给他！

    声明:本文以jdk1.8为主! 搞定HashMap 作为一个Java从业者,面试的时候肯定会被问到过HashMap,因为对于HashMap来说,可以说是Java==集合中的精髓==了,如果你觉得自己对 ...

  4. ios中ipa包的发布平台

    目前我所知的平台 1.蒲公英 目前 限制  金融类app  区块链类app的上传,小编的号因此刚被封号,而且交涉无果,不给解封,只有提交工单,包号注销了,再注册一个[建议看一下使用规则] 小编认为, ...

  5. tp5 rewrite apache 配置

    emmmmm,本来还是nginx服务器,突然换成了apache ubuntu系统,apache2服务器,tp5, 1.首先还是运行phpinfo.php,搜一下“Loaded Modules”这里面是 ...

  6. cordova将vue项目打包成apk

    1,若vue项目不在cordova项目里,直接把它复制进来,避免改动代码的麻烦 2,直接按照以下链接进行操作即可 链接:https://www.cnblogs.com/qirui/p/8421372. ...

  7. Python socket day1

    客户端和服务端通过ip地址确认互相身份.(ip:用来在网络中标记一台电脑) 如果A,B两个人IP地址相同,接受到的信息有时候A收到,有时候B收到 当你用QQ时,双击选中头像其实就是选中了对方的IP地址 ...

  8. SVG和canvas的区别

    1.Canvas 是用JavaScript 操作动态生成的, SVG 则是使用XML静态描述生成的; 2.Canvas 基于位图,简单来说就是图片放大会影响到显示的效果,造成不好的影响,SVG 基于矢 ...

  9. Steam 游戏 《Sudoku Universe（数独宇宙）》、《Sudoku Killer（数独杀手）》、《Sudoku Jigsaw（数独拼图）》数字位置解析 ---------C# 数独程序解析（2020年寒假小目标11）

    日期:2020.02.11 博客期:151 星期二 今天,准备肝一个 C# 的数独读写工具(汇编语言也在努力学习命令方法中...),这三个游戏我早就买下了,一直放在 Steam 库里积灰,看着它的成就 ...

  10. elasticsearch ik解析器

    ik解析器 1.      ik解析器 The IK Analysis plugin integrates Lucene IK analyzer (http://code.google.com/p/i ...