代码实例如下:

<!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. Awesome Deep Vision

    Awesome Deep Vision  A curated list of deep learning resources for computer vision, inspired by awes ...

  2. 谷歌浏览器chrome与firefox的冲突（未解之谜）

    那年,公司开发了一套在线制作电子书的系统 e-textbook. 我负责小学电脑科教材在线题目的制作. 利用 ps制作剪裁好图片,导入系统,制作题目,并通知同事添加代码. 检测时,却发现有一道图片拖放 ...

  3. PHP-网页跳转的几种方式

    本文总结了跳转到指定网页的几种方式. 1.利用PHP的header函数Location响应头, header是用来向浏览器返回HTTP响应头(详细请看HTTP协议详解) <?php header ...

  4. Measuring the amount of writes in InnoDB redo logs

    Choosing a good InnoDB log file size is key to InnoDB write performance. This can be done by measuri ...

  5. shell之eval-command

    本文将会讲解一些linux中命令的使用与技巧希望对新手给予帮助一 e v a l命令将会首先扫描命令行进行所有的置换,然后再执行该命令.该命令适用于那些一次扫描无法实现其功能的变量.该命令对变量进行两 ...

  6. 【转】C#取硬盘、CPU、主板、网卡的序号 ManagementObjectSearcher

    private void button1_Click(object sender, EventArgs e) { textBox1.Text = ""; foreach (stri ...

  7. java通过ftp和sftp上传war包上传到Linux服务器实现自动重启tomcat的脚本代码

    ar包自动上传Linux并且自动重启tomcat 用的是jdk1.7出的文件监控 支持ftp和sftp,支持多服务器负载等 配置好config 非maven项目导入直接使用 #\u76D1\u542C ...

  8. R(二): http与R脚本通讯环境安装

    结合实际的工作环境,在开始R研究的时候,首先着手收集的就是能以Web方式发布R运行结果的基础框架,无耐的是,R一直以来常使用于个人电脑的客户端程序上,大家习惯性的下载R安装包,在自己的电脑上安装 -- ...

  9. Message,MessageQueue,Looper,Handler详解+实例

    Message,MessageQueue,Looper,Handler详解+实例 原文地址 Android的Handler使用(这篇简单介绍Handler的使用) 一.几个关键概念 1.Message ...

  10. HTML 文本格式化

    HTML 可定义很多供格式化输出的元素,比如粗体和斜体字. 下面有很多例子,您可以亲自试试: HTML 文本格式化实例 文本格式化 此例演示如何在一个 HTML 文件中对文本进行格式化 预格式文本 此 ...