代码实例如下:

<!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. Linux-理解ARP、网关、路由

    假设你叫小不点(本地主机),住在一个大院子(本地局域网)里,有很多邻居(网络邻居),门口传达室有个看大门的李大爷,李大爷就是你的网关.当你想跟院子里的某个伙伴玩,只要你在院子里大喊一声他的名字(pin ...

  2. ToDictionary,ToLookup

    这个系列我们看看C#中有哪些我们知道,但是又不知道怎么用,又或者懒得去了解的东西,比如这篇我们要介绍的toDictionary 和ToLookup. 从图中我们看到有四个ToXXX的方法,其中ToAr ...

  3. 《Python自然语言处理》中文版-纠错【更新中。。。】

    最近在看<Python自然语言处理>中文版这本书,可能由于是从py2.x到py3.x,加上nltk的更新的原因,或者作者的一些笔误,在书中很多代码都运行不能通过,下面我就整理一下一点有问题 ...

  4. 验证码在IE中不刷新

    在IE中,验证码不会刷新而谷歌等其他浏览器没有问题,解决方案就是在验证码的切换地址后面加一个随机的参数 今天在做验证码的时候发现在IE中,验证码不会刷新,而谷歌等其他浏览器没有问题,所以我想到应该是缓 ...

  5. javascript中的继承实现

    javascript虽然是一门面向对象的语言,但是它的继承机制从一开始设计的时候就不同于传统的其他面向对象语言,是基于原型的继承机制,但是在这种机制下,继承依然有一些不同的实现方式. 方法一:类式继承 ...

  6. smarty函数-继承extents

    继承<{extends}> {extends}标签用在模版中的第一行: 如果子模板用{extends}标签继承父模板,那么它只能包含{block}标签(内容),其它任何模板内容都将忽略: ...

  7. 设计师必看的10个HTML5动画工具

    如果你想用令人难以置信的动画创建引人注目的网站的话,那么这里为设计师精心挑选了一些必备的HTML5动画工具.HTML5是设计师用来打造时尚网站的最流行的编程语言之一.在过去三年内,这种编程语言的使用人 ...

  8. 剑指offer系列52---约瑟夫环问题

    [题目]0,1,...n排成一个圈,从0开始每次删除第m个数,求圆圈最后个数. * [思路]1 用数组模拟圆圈.当数到最后一个数即index==n时,令index==0 重头开始遍历: * 当遇到已经 ...

  9. Python标准库

    Python标准库是随Python附带安装的,它包含大量极其有用的模块.熟悉Python标准库是十分重要的,因为如果你熟悉这些库中的模块,那么你的大多数问题都可以简单快捷地使用它们来解决. sys模块 ...

  10. Windows Server 2008 - How to Move the Quorum Disk Group

    I received this question from a friend the other day - asking how on a Windows Server 2008 cluster y ...