input文本框实现宽度自适应代码实例-阿里云开发者社区

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

2018-03-01 3206

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介：

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

代码实例如下:

         <!DOCTYPE html>
        
 
         <
         html
         > 
        
 
         <
         head
         > 
        
 
         <
         meta 
         charset
         =
         " utf-8"
         > 
        
 
         <
         meta 
         name
         =
         "author" 
         content
         =
         "http://www.softwhy.com/" 
         /> 
        
 
         <
         title
         >蚂蚁部落</
         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
         > 
        

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

原文发布时间为：2017-2-11

本文作者：admin

本文来自云栖社区合作伙伴“蚂蚁部落”，了解相关信息可以关注蚂蚁部落

原文链接：input文本框实现宽度自适应代码实例

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

热门文章

最新文章

相关电子书