代码实例如下:

<!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. UBUNTU下SUBLIME TEXT3的安装+破解+汉化+中文输入

    一.Sublime Text3的下载安装 建议直接去官网下载最新版deb安装包:http://www.sublimetext.com/3 二.Sublime Text3的破解 3114版 -– BEG ...

  2. phpstrom 编辑器设置

    http://www.jb51.net/article/58069.htm 配置sublime主题  保存配置的路径为:C:\Users\Administrator\.WebIde100\config ...

  3. 【转】IOS学习笔记29—提示框第三方库之MBProgressHUD

    原文网址:http://blog.csdn.net/ryantang03/article/details/7877120 MBProgressHUD是一个开源项目,实现了很多种样式的提示框,使用上简单 ...

  4. 机器学习&人工智能书籍

    Introduction to Machine Learning https://www.amazon.cn/Introduction-to-Machine-Learning-Alpaydin-Eth ...

  5. Microservice Orleans

    https://azure.microsoft.com/en-us/blog/containers-docker-windows-and-trends/ https://channel9.msdn.c ...

  6. HBase 安装过程记录

    http://blog.csdn.net/chenxingzhen001/article/details/7756129 环境: 操作系统Centos 6.4 32-bit 三台节点 ip       ...

  7. Python内部类型

      Python使用对象模型来存储数据 . 身份:每个对象都有一个唯一的身份标识自己,任何对象的身份否可以使用内建函数id()来得到.这个值可以被认为是该对象的内存地址 . 类型:对象的类型决定了该对 ...

  8. 九度OJ 1010:计算A+B【字符串和数组】

    /*======================================================================== 题目1010:A + B 时间限制:1 秒内存限制 ...

  9. jsp常用指令

    Jsp包含三个编译指令和七个动作指令. 三个编译指令为:page.include.taglib. 七个动作指令为:jsp:forward.jsp:param.jsp:include.jsp:plugi ...

  10. android操作sdcard中的多媒体文件(二)——音乐列表的更新

    android操作sdcard中的多媒体文件(二)——音乐列表的更新 原文地址 在上一篇随笔中,我介绍了如何在程序中查询sdcard内的多媒体文件,并且显示到播放列表中,但是,如果在sdcard内删除 ...