input文本框实现宽度自适应代码实例-低调大师

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

2018-02-28 751

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

代码实例如下:

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

18

19

         <!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文本框实现宽度自适应代码实例

微信关注我们

原文链接：https://yq.aliyun.com/articles/573427

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

为每一个table单元格设置不同的背景颜色

本章节介绍一下如何给表格的每一个单元格设置一个背景颜色，当然这里的方法比较笨拙，主要面向初学者。代码如下: 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 <!DOCTYPE html> < html > < head > < meta charset = " utf-8" > < meta name = "author" content = "http://www.softwhy.com/" /> < title >蚂蚁部落</ title > </ head > < body > < table cellspacing = "0" style = "width:980px;height:200px;" > < tr > < td bgcolor = "...

2018-03-01

816

有时候可能我们不需要网页缓存数据，而是要实时从服务器更新最新的内容，下面就简单介绍一下能够实现此功能的代码，希望能够给需要的朋友带来一定的帮助。实现方法一: 1 2 3 4 5 < head > < meta http-equiv = "Pragma" content = "no-cache" > < meta http-equiv = "Cache-Control" content = "no-cache" > < meta http-equiv = "Expires" content = "0" > </ head > 在网页的头部添加如下元素。实现方法二: 1 2 3 4 5 Response.Buffer = True Response.ExpiresAbsolute = Now() - 1 Response.Expires = 0 Response.CacheControl = "no-cache" Response.AddHeader "Pragma", "No-Cache" 上面的代码是ASP使用的方式，可以...

2018-03-01

721

资源下载

更多资源

优质分享App

近一个月的开发和优化，本站点的第一个app全新上线。该app采用极致压缩，本体才4.36MB。系统里面做了大量数据访问、缓存优化。方便用户在手机上查看文章。后续会推出HarmonyOS的适配版本。

腾讯云软件源

为解决软件依赖安装时官方源访问速度慢的问题，腾讯云为一些软件搭建了缓存服务。您可以通过使用腾讯云软件源站来提升依赖包的安装速度。为了方便用户自由搭建服务架构，目前腾讯云软件源站支持公网访问和内网访问。

Spring

Spring框架（Spring Framework）是由Rod Johnson于2002年提出的开源Java企业级应用框架，旨在通过使用JavaBean替代传统EJB实现方式降低企业级编程开发的复杂性。该框架基于简单性、可测试性和松耦合性设计理念，提供核心容器、应用上下文、数据访问集成等模块，支持整合Hibernate、Struts等第三方框架，其适用范围不仅限于服务器端开发，绝大多数Java应用均可从中受益。

Rocky Linux

Rocky Linux（中文名：洛基）是由Gregory Kurtzer于2020年12月发起的企业级Linux发行版，作为CentOS稳定版停止维护后与RHEL（Red Hat Enterprise Linux）完全兼容的开源替代方案，由社区拥有并管理，支持x86_64、aarch64等架构。其通过重新编译RHEL源代码提供长期稳定性，采用模块化包装和SELinux安全架构，默认包含GNOME桌面环境及XFS文件系统，支持十年生命周期更新。