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. STA之AOCV

    为什么要引入AOCV 为了精确性,为了剔除悲观度.用set_timing_derate来设置OCV,对于一个固定的corner,只能对data/clock, cell/net, late/early分 ...

  2. ViewModel、LiveData、DataBinding

    ViewModel ViewModel的引入 如果系统销毁或重新创建界面控制器,则存储在其中的任何临时性界面相关数据都会丢失.例如,应用的某个 Activity 中可能包含用户列表.因配置更改而重新创 ...

  3. 安卓基础（AndroidViewModel）

    今天学习了AndroidViewModel,但是我根据视频上讲解,根据所讲用例,在添加依赖得时候一直报错,后来我请教大佬,他告诉我说是,因为网络得问题,国外得一些依赖有可能下不下来,所以可以下载阿里云 ...

  4. HDU 1237 简单计算器（栈+stringstream）

    提供几份代码,这题的输入可以用stringsteam处理,先处理乘除后处理加减,正常思路,但是后面统计加减法的时候,对栈的运用错了,我用的时候相当于给它多加了几个括号就错了. 正确的简单解法就是,加法 ...

  5. python小白的爬虫之旅

    1.爬www.haha56.net/main/youmo网站的内容 ieimport requests import re response=requests.get("http://www ...

  6. hackme.inndy.tw - pyyy

    0x01 反编译 1.第一次尝试的时候我直接在线反编译,部分结果如下. for (i, f) in enumerate(F): n = pow(f, m, g) this_is = 'Y-Combin ...

  7. elasticsearch数据组织结构

    elasticsearch数据组织结构 1.      mapping 1.1.    简介 mapping:意为映射关系,特别是指组织结构.在此语境中可理解为数据结构,包括表结构,表约束,数据类型等 ...

  8. 吴裕雄--天生自然Numpy库学习笔记：NumPy 数组属性

    NumPy 数组的维数称为秩(rank),秩就是轴的数量,即数组的维度,一维数组的秩为 1,二维数组的秩为 2,以此类推. 在 NumPy中,每一个线性的数组称为是一个轴(axis),也就是维度(di ...

  9. 配置SVTI

    路由器SVTI站点到站点VPN         在IOS 12.4之前建立安全的站点间隧道只能采用GRE over IPSec,从IOS 12.4之后设计了一种全新的隧道技术,即VIT(Virtual ...

  10. Codeforces Round #619 (Div. 2) A. Three Strings

    You are given three strings aa , bb and cc of the same length nn . The strings consist of lowercase ...