我的插件のinput文本框实现宽度自适应

本章节介绍一下如何让一个文本框的宽度能够随着文本框中的内容的宽度增长而增长,也就是能够实现宽度自适应效果。

代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="skyFi.github.io/skylor" />
<title>skyFi.github.io/skylor</title> 

<script type="text/javascript">     window.onload=function(){ 

      var otxt=document.getElementById("txt");       otxt.onkeyup=function(){ 

        this.size=(this.value.length>4?this.value.length:4);       }    } 

</script> 

</head>

 <body> 

<input type="text" id="txt" size="4"/> 

</body> 

</html>

查看演示:input文本框实现宽度自适应

以上代码实现了我们的要求,代码非常的简单,注册onkeyup事件处理函数,此函数可以判断当前输入内容的长度是否大于默认长度,如果不大于,则文本框的长度就是4,否则就是输入内容的长度。

但是,这个方式实现了英文输入能够很好地工作,可是当遇到使用中文输入法的时候就不是那么的好用了。因为一般中文输入法都是先有英文,按下space后才把文字输入到输入框的,这会照成计算错误。

而且这个一般不能满足大多数人的需求,于是我又弄一种并组装了下:请看代码

;
(function ($) {
        $.fn.autoFit = function() {
            var $this = $(this);
            var oldWidth = parseInt($this.css(‘width‘));
            $this.keydown(function (event) {
                var $this = $(this);
                setTimeout(function() {
                    var val = $this.val().replace(/ /g, ‘&nbsp‘);
                    var fontSize = $this.css(‘font-size‘);
                    var fontFamily =  $this.css(‘font-family‘);
                    var padding = $this.outerWidth() - $this.width();
                    var contentWidth = $(‘<span id="autowidthforinputtext" style="font-size: ‘ + fontSize + ‘; padding: 0 ‘ + padding / 2 + ‘px; font-family: ‘ + fontFamily + ‘; display: block; position: absolute; visibility: hidden;">‘ + val + ‘</span>‘).insertAfter($this).outerWidth();
                    var newWidth = ((contentWidth + padding) > oldWidth) ? (contentWidth + padding) : oldWidth;
                    $(‘#autowidthforinputtext‘).remove();
                    $this.width(newWidth + ‘px‘);
                }, 0);
            });
            return $this;
        };
})(this[‘jQuery‘]);

$(‘#txt‘).autoFit();

于是这个就可以很好地工作了,恩,自己很满意。测试路子. github源码

想了下还是简单分析下吧:

1、这是Q的fn扩展,好处是可以直接JQuery对象用’.‘就能调用我的函数。

2、采用闭包避免命名污染,同时包装记录最开始用户定义的input宽度。

3、巧妙使用0延时的setTimeout使得插件很好地支持了中文输入法带来的之前的BUG。至于为什么,我的另一篇文章中有介绍,setTimeout执行队列啥的。

4、对输入的空格做了转码处理。

时间: 2024-10-12 21:43:11

我的插件のinput文本框实现宽度自适应的相关文章

input文本框实现宽度自适应代码实例

代码实例如下: <!DOCTYPE html> <html><head><meta charset="utf-8"><meta name="author" content="http://www.51texiao.cn/" /><title>蚂蚁部落</title><script type="text/javascript">win

css设置input文本框样式代码实例

css设置input文本框样式代码实例:使用css设置input元素的样式是最为常用的操作之一,当然也是最为基础的操作,可能对于刚刚接触css的朋友还不够熟悉,下面就通过一段简单的代码历史演示一下如何设置文本框的样式,当然这个演示可能并不是特别的美观,这里的目的也只是起到一个演示作用,代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="

设置input文本框只读效果

设置input文本框只读效果:在实际应用中可能需要将input文本框设置为只读状态,代码实际非常简单,只要添加一个属性即可.代码如下: <input type="text" value="蚂蚁部落" readonly/> 使用readonly属性即可将文本框设置为只读状态,具体可以参阅<input>标签的readonly属性一章节. 原文地址:http://www.51texiao.cn/HTML5jiaocheng/2015/0521/21

input文本框圆角效果代码实例

input文本框圆角效果代码实例:本章节分享一段代码实例,它实现了将input文本框设置为圆角的功能.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</tit

JS动态生成Input文本框 并获取文本框值

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns= "http://www.w3.org/1999/xhtml" > <head> <meta http-equiv= "Conte

input文本框输入内容控制

CreateTime--2016年10月24日15:17:17Author:Marydoninput文本框录入内容控制 1.控制录入的最多是保留两位小数的数字 <input type="text" onkeyup="this.value=this.value.match(/\d+(\.\d{0,2})?/)||[''])[0]" /> UpdateTime--2016年12月17日22:02:18 2.控制不能录入中文,这里只能使用onkeyup属性,原

chrome表单自动填充导致input文本框背景变成偏黄色问题解决

chrome表单自动填充导致input文本框背景变成偏黄色问题解决 作者:佚名 字体:[增加 减小] 来源:互联网 时间:08-21 18:43:32我要评论 chrome表单自动填充后,input文本框的背景会变成偏黄色的,想必大家都会碰到这种情况吧,这是由于chrome会默认给自动填充的input表单加上input:-webkit-autofill私有属性造成的,解决方法如下,感兴趣的朋友可以了解下 chrome表单自动填充后,input文本框的背景会变成偏黄色的,这是由于chrome会默认

&lt;input&gt;文本框的readonly和disabled属性区别

<input>文本框的readonly和disabled属性区别: 本章节简单介绍一下标题中两个属性的主要区别,希望能够给需要的朋友带来帮助. 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.51texiao.cn/" /> &

如何让input文本框和图片对齐

如何让input文本框和图片对齐:在默认情况下,input文本框和图片无法垂直居中,总会有所偏差,下面就介绍一下如何实现此效果.代码如下: <input id="qq" name="qq" style="width:100px;vertical-align:middle" /> <img border="0" style="vertical-align:middle"/> 只要给元素