代码实例如下:

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.51texiao.cn/" />
<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，否则就是输入内容的长度。

input文本框实现宽度自适应代码实例的更多相关文章

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

    本章节介绍一下如何让一个文本框的宽度能够随着文本框中的内容的宽度增长而增长,也就是能够实现宽度自适应效果. 代码实例如下: <!DOCTYPE html> <html> < ...

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

    先来最后结果:DEMO 介绍一下如何让一个文本框的宽度能够随着文本框中的内容的宽度增长而增长,也就是能够实现宽度自适应效果. 代码实例如下: <!DOCTYPE html> <htm ...

  3. input文本框自适应文本内容宽度

    input文本框自适应文本内容宽度 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  4. input文本框设置和移除默认值

    input文本框设置和移除默认值 这里想实现的效果是:设置和移除文本框默认值,如下图鼠标放到文本框中的时候,灰字消失. 1.可以用简单的方式,就是给input文本框加上onfocus属性,如下代码: ...

  5. HTML input文本框设置和移除默认值

    这里想实现的效果是:设置和移除文本框默认值,如下图鼠标放到文本框中的时候,灰字消失. 1.可以用简单的方式,就是给input文本框加上onfocus属性,如下代码: <input id=&quo ...

  6. 同步文本框内容的JS代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. input 文本框和 img 验证码对齐问题

    input 文本框和 img 验证码对齐问题 在网页制作中,常将 input 和 img 放在同一行,img标签总是比input高出一个头,非常难看. CCS实现input和img水平对齐的方法 同时 ...

  8. js中input文本框设置和移除默认值

    这里想实现的效果是:设置和移除文本框默认值,如下图鼠标放到文本框中的时候,灰字消失. 1.可以用简单的方式,就是给input文本框加上onfocus属性,如下代码: <input id=&quo ...

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

    你曾遇到过吗? 困扰宝宝好久的问题,本以为是什么插件导致的,结果是chrome浏览器自动填充文本时默认的样式,搜嘎. 一.修改自动填充input文本框背景色: 使用以下代码 可以设置自己的想要的默认文 ...

随机推荐

  1. Qt QTreeWidget节点的添加+双击响应+删除详解（转）

    QTreeWidget是实现树形结构的类,在很多软件中都可以看到类似树形结构的界面. 我做的一个示例如下图,用来处理图像,最顶层节点是图像的路径名,子节点是图像的各个波段,双击各个波段会显示图像各波段 ...

  2. ogg 、 Shareplex和DSG RealSync 对比

    主流数据库容灾(复制)工具对比     Oracle Golden Gate Quest Shareplex DSG RealSync   公司概要   公司介绍 GoldenGate公司成立于200 ...

  3. C#中IP地址转换为数值的方法

    任何语言都通用的方法转换 IP 地址 a.b.c.d ==> a***+b**+c*+d ===> *(c+*(b+*a)) +d 示例: ***+**+*+ ===> *( +*( ...

  4. Unity3D的杂记

    刷新帧的不同控制函数 FixedUpdate 可以多次调用: 不饿能用于帧频很高的情况: Update 仅一次调用(每帧): LateUpdate 每帧调用一次: Corountine 用startC ...

  5. python模块结构和布局

    用模块来合理的组织你的python代码是简单又自然的方法.下面介绍一种非常合理的布局: #(1)起始行(Unix) #(2)模块文档 #(3)模块导入 #(4)变量定义 #(5)类定义 #(6)函数定 ...

  6. 如何用Transformer+从PDF文档编辑数据

    ABBYY PDF Transformer+是一款可创建.编辑.添加注释及将PDF文件转换为其他可编辑格式的通用工具,可使用该软件从PDF文档编辑机密信息,然后再发布它们,文本和图像均可编辑,本文将为 ...

  7. 让EDIUS中素材小距离精确移动的教程

    我们在使用EDIUS视频编辑软件编辑视频的时候,发现想要把剪辑好的视频片段做小距离的调整非常的不容易,一不小心手滑就移多了.这个问题是不是很令人烦躁?不过你们看完今天的文章就不会再为这个问题发愁了.本 ...

  8. Flex 布局教程：实例篇（转）

    你会看到,不管是什么布局,Flex往往都可以几行命令搞定. 我只列出代码,详细的语法解释请查阅<Flex布局教程:语法篇>.我的主要参考资料是Landon Schropp的文章和Solve ...

  9. 用NativeScript创建JavaScript原生移动应用

    Telerik公开了用于创建安卓.iOS和Windows Universal跨平台原生应用的框架,NativeScript的公共访问权限. NativeScript既不是一种新型的JavaScript ...

  10. Linux-LNMP LAMP LNMPA

    这个脚本是使用shell编写,为了快速在生产环境上部署lnmp/lamp/lnmpa(Linux.Nginx/Tengine.MySQL/MariaDB/Percona.PHP),适用于CentOS ...