jQuery计算文本宽度和input标签根据输入字符动态自适应宽度的实现
来源:互联网 发布:mac下载阿里旺旺 编辑:程序博客网 时间:2024/05/22 14:53
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;
};
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()));
});
$("input").unbind('keydown').bind('keydown', function(){
$(this).width(textWidth($(this).val()));
});
1 2
- jQuery计算文本宽度和input标签根据输入字符动态自适应宽度的实现
- jQuery计算文本宽度和input标签根据输入字符动态自适应宽度的实现
- jquery 实现input宽度自适应
- Jquery 自适应宽度的input
- 根据文本内容快速自适应控件的宽度和高度
- input输入框的宽度自适应
- UILabel根据文本、字体大小计算label宽度;以及自适应高度
- input宽度自适应[使用jquery]
- as3 TextField 宽度根据文本内容自适应
- Jquery - 调整Input标签的宽度并应用grid将input和button并排一行
- 计算文本宽度和高度的方法
- 自适应宽度的标签导航
- jquery获取文本的宽度和高度。
- IOS聊天泡泡,根据内容计算宽度和高度(动态计算高度和宽度)
- 计算一个字符的宽度和高度
- input宽度自适应
- TextView宽度一定,实现TextView自适应任何长度的文本
- 按钮宽度和高度固定,字体大小根据字数自适应用的javascript实现
- CFLAGS,LDFLAGS,LIBS
- Executor & ExecutorService
- 解析oracle的rownum
- 泛型类使用
- Android -- 状态栏通知Notification、NotificationManager详解
- jQuery计算文本宽度和input标签根据输入字符动态自适应宽度的实现
- Oracle 10g逻辑备份---ORA-39002、ORA-39070……
- 宏定义#define
- PycURL 中文版文档
- 齐次坐标 一般摄像机模型
- C,C++宏中#与##的讲解
- Http11: org.apache.coyote.http11
- ios 键盘事件处理
- 一次rac+dataguard 创建过程遇到密码文件问题