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. 给footer标签设置padding:7px auto;失效

    margin:auto可以做到水平居中,前提条件就是,这个标签是块状元素,并且有个确定的宽度,百分比的宽度也行: padding的话, 设置成auto它会自动继承浏览器的padding值, 当设置pa ...

  2. 【WPF学习】第十四章 事件路由

    由上一章可知,WPF中的许多控件都是内容控件,而内容控件可包含任何类型以及大量的嵌套内容.例如,可构建包含图形的按钮,创建混合了文本和图片内容的标签,或者为了实现滚动或折叠的显示效果而在特定容器中放置 ...

  3. 【原】移动端vue页面点透事件 - 分析与解决

    近期项目遇到了vue页面事件被带到下一个页面的问题,也就是我们常说的点透事件,主要表现在android机器上,花了不少时间折腾,简单做下总结~ vue页面之间的切换通过Vue Router的route ...

  4. 使用Python处理非对称加密-测试大佬常用的处理方式

    一.思考❓❔ 1.什么是非对称加密? 公钥加密系统,广泛用于数据加密传输 更详细的解释可参考维基百科( https://en.wikipedia.org/wiki/RSA_(cryptosystem) ...

  5. JS高级---利用原型共享数据

    什么样子的数据是需要写在原型中? 需要共享的数据就可以写原型中 原型的作用之一: 数据共享 //属性需要共享, 方法也需要共享 //不需要共享的数据写在构造函数中,需要共享的数据写在原型中 //构造函 ...

  6. vscode管理员身份运行

    管理员身份运行,如vscode 如何设置呢? vscode图标右键 以管理员身份运行程序打钩就行了 运行“在终端打开”的时候,要以管理员身份运行 刚下载完vscode并运行并不是管理员身份会报错  解 ...

  7. k8s Learning Notes

    Kubernetes - 组件介绍 MESOS APACHE 分布式资源管理框架 2019-5 Twitter > Kubernetes Docker Swarm 2019-07 阿里云宣布 D ...

  8. PS绘制Logo

    1. 2. 3. 4. 5. 6. 第2步点击“圆1”应点击图层左边的缩览图才能获取选区 7. 8. 9. 10. 11. 12.

  9. 好用的px转rem插件cssrem

    下载本项目,比如:git clone https://github.com/flashlizi/cssrem 进入packages目录:Sublime Text -> Preferences - ...

  10. 使用pycharm创建Django项目，'django-admin' 不是内部或外部命令

    报错信息如下: (笔者的电脑为win10,python3.7,django 2.2.6 ) 第一种情况的解决方案:没有配置环境变量,Django安装之后,需要配置环境变量,命令django-admin ...