jQuery计算文本宽度和input标签根据输入字符动态自适应宽度的实现
2016-01-08 14:11
621 查看
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()));
});
顶
0
踩
//获取文本宽度
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()));
});
顶
0
踩
相关文章推荐
- jquery判断checkbox全选,全取消
- jquery-css
- jquery学习随笔(基础DOM与CSS)
- js jquery学习
- JavaScript(15)jQuery 选择器
- Html5添加自动排列图片的jquery响应式图片排列插件教程
- jquery this与$this的区别
- jquery实现简单鼠标经过图片预览效果
- jquery 合并两个 json 对象
- jQuery插件开发模式
- jquery实现简单的遮罩层
- 【JavaScript】jquery的each()详细介绍
- jquery的each()详细介绍
- jquery中的serialize
- W3c jquery+javascriptl基础参考手册-2016-01参考
- jquery中的全局事件
- jQuery抛物线运动实现方法(附完整demo源码下载)
- jQuery validate 根据 asp.net MVC的验证提取简单快捷的验证方式
- jquery 表单验证
- jquery序列化元素