• 网站首页
• 网站建设
• 短视频
• 网站推广
• 网站模板
• 客户案例
• 资讯动态
• 关于我们

input宽度自适应_CSS学习

当前位置：网站建设 > 技术支持

input宽度自适应？

很多时候文本框输入的内容是不固定的，有时候输入的内容多一些需要宽一些有时候输入的内容少一些需要窄一些，所以需要设置input的宽度自适应。工具原料：编辑器、jQuery1、解决宽度自适应的思路是使用jQuery来监听输入事件，进而进行动态的改变input的宽度，实现input宽度自适应的效果。2、首选获取文本的宽度，利用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").unbind('keydown').bind('keydown', function(){ $(this).width(textWidth($(this).val())); });

版权说明：
本网站凡注明“广州京杭 原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。