如何用類的對象的方法控制輸入文本框的大小

<form name="frmTxt">
輸入關鍵字：
<input type="text" id="key" onKeyPress="changeSize1();" name="key" size="10">
<br/>
輸入文章：
<input type="text" id="text" onKeyPress="changeSize2();" name="word" size="10">
</form><script language="javascript">
function changeSize1()
{
if(document.frmTxt.key.value.length > 1 )
{
document.frmTxt.key.size=document.frmTxt.key.value.length;
}
}
function changeSize2()
{
if(document.frmTxt.word.value.length > 1 )
{
document.frmTxt.word.size=document.frmTxt.word.value.length;
}
}
</script>

解决方案 »

  1.   

    <html>
    <head>
        <title>变长文本框</title>
    </head>
    <body>
    <input type="text" name="" id="text1"/>
    <script type="text/javascript">
        var Env = function() {
        };
        Env.attachEvent = function(elem, eventName, callback) {
            if (elem.addEventListener) { // Non-IE browsers
                elem.addEventListener(eventName, callback, false);        } else if (elem.attachEvent) { // IE 6+
                elem.attachEvent('on' + eventName, callback);        } else { // Older browsers
                var currentEventHandler = elem['on' + eventName];
                if (currentEventHandler == null) {
                    elem['on' + eventName] = callback;
                } else {
                    elem['on' + eventName] = function(e) {
                        currentEventHandler(e);
                        callback(e);
                    }
                }
            }
        }    var ResizableTextbox = function(id) {
            var text = document.getElementById(id);
            Env.attachEvent(text, "keypress", function() {
                text.size = text.value.length + 1;
            })
        }    ResizableTextbox("text1");
    </script>
    </body>
    </html>不过中文字就要多一点判断了
      

  2.   

    第一個功能實現了，但沒有用對象；
    第二個太複雜，不用attachEvent，直接寫類或對象的方法作為控件的屬性可以嗎？