jQuery计算文本宽度的原理是利用html提供的<pre>标签,向dom中动态添加<pre>标签,标签里的内容就是要测试长度的文本,获取完长度之后再删除刚才添加的<pre>标签,从而可取到文本的大概长度了。为什么要用标签而不用其他标签呢,那来看看<pre>标签的特性吧:pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符;而文本也会呈现为等宽字体。 <pre>标签的一个常见应用就是用来表示计算机的源代码。需要注意的地方是,计算文本长度时文本里面最好不要有其他标签。以下是实现代码:

//获取文本宽度
var textWidth = function(text){
var sensor = $('<pre>'+ text +'</pre>').css({display: 'none'});
$('body').append(sensor);
var width = sensor.width();
sensor.remove();
return width;
};
有了上面这个函数,input标签根据输入字符动态自适应宽度的实现就简单了:
//input宽度自适应
$("input").unbind('keydown').bind('keydown', function(){
$(this).width(textWidth($(this).val()));
});

jQuery计算文本宽度和input标签根据输入字符动态自适应宽度的实现的更多相关文章

  1. jquery计算文本字符个数

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  2. 输入类型<input type="number"> / input标签的输入限制

    输入限制 属性 描述 disabled 规定输入字段应该被禁用. max 规定输入字段的最大值. maxlength 规定输入字段的最大字符数. min 规定输入字段的最小值. pattern 规定通 ...

  3. input 标签只能输入数字

    $("input[name='contact']").keyup(function(){ $("input[name='contact']").attr(&qu ...

  4. JQ input标签限制输入数字或字母

    <input type="text"  maxlength="20" class="input5" onkeyup="val ...

  5. input长度随输入内容动态变化 input光标定位在最右侧

    <input type="text" onkeydown="this.onkeyup();" onkeyup="this.size=(this. ...

  6. 一个宽度不确定的DIV里放三个水平对齐的DIV,左右两个DIV宽度固定为100px,中间那个DIV自适应宽度

    方法一:浮动  注意三个div的位置 <html><head> <meta charset="utf-8"> <style type=&q ...

  7. IE中input标签密码框与文本框宽度不一样问题

    前言 在项目登录界面中有账户和密码的输入框,在Chrome中显示是正常的(本人使用的是Chrome浏览器,平时不用IE).等部署到客户的服务器上,访问时发现一个问题,在IE浏览器中文本框与密码框的宽度 ...

  8. jQuery实现限制input框 textarea文本框输入字符数量的方法

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  9. jquery 无刷新添加/删除 input行 实时计算购物车价格

    jquery 无刷新添加/删除 input行 实时计算购物车价格 jquery 未来事件插件jq_Live_Extension.js 演示 <script> $(document).rea ...

随机推荐

  1. 微信小程序我的界面

    前言 感谢! 承蒙关照~ 微信小程序我的界面 界面效果: 界面结构: 小程序代码: 我们先看me.json代码 { "navigationBarTitleText": " ...

  2. 前端切图神器-cutterman

    之前我写过一篇关于前端切图的博客:https://www.cnblogs.com/tu-0718/p/9741058.html 但上面的方法在切图量大时依然很费时间,下面向大家推荐这款免费切图神器 c ...

  3. 排序函数 sort() 和 高阶函数sorted()

    · sorted():该函数第一个参数iterable为任意可以迭代的对象,key是用于比较的关键字,reverse表示排序结果是否反转. · L.sort():该函数的三个参数和 sorted() ...

  4. java中MD5加密

    MD5加密是一种不可逆(一些网站通过庞大的数据库可以解密一些简单的)的加密算法(其实是信息摘要算法),常用于用户密码,文件上传等 MD5算法具有以下特点: 1.压缩性:任意长度的数据,算出的MD5值长 ...

  5. promise与async-await

    一. async/await 相对 promise 的优势 async/await 拥有更通用的作用域,使得代码有更好的易读性和可维护性. promise 由于其链式调用,每一个函数都有自己的作用域, ...

  6. 五分钟了解node,cnpm和yarn

    1.静态网页和动态网页 动态网页:数据可以进行交互,动态改变数据 2.node node是基于chrome的V8引擎的javascript的运行环境,node中的事件机制以及非阻塞式的I/O式模式,使 ...

  7. 从零开始学 Web 之 Vue.js(四)Vue的Ajax请求和跨域

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  8. [NewLife.XCode]实体类详解

    NewLife.XCode是一个有10多年历史的开源数据中间件,由新生命团队(2002~2019)开发完成并维护至今,以下简称XCode. 整个系列教程会大量结合示例代码和运行日志来进行深入分析,蕴含 ...

  9. DataCleaner(4.5)第二章

    Chapter 2. Getting started with DataCleaner desktop Table of Contents |--Installing the desktop appl ...

  10. 一张图读懂PBN飞越转弯衔接DF航段计算

    飞越转弯衔接TF航段时,转弯外边界与旁切转弯相似,只是在拐角位置直接以风螺旋绘制外边界,大部分切点可以精确计算得到. 飞越转弯衔接DF航段时,转弯外边界全部由风螺旋和它的切线构成,又会有哪些神奇的事情 ...