代码实例如下:

<!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. 论文笔记之：Spatially Supervised Recurrent Convolutional Neural Networks for Visual Object Tracking

    Spatially Supervised Recurrent Convolutional Neural Networks for Visual Object Tracking  arXiv Paper ...

  2. argparse

    import argparse def test(a,b): print int(a)+int(b) parser = argparse.ArgumentParser() parser.add_arg ...

  3. The launch will only sync the application package on the device!

    在开始学习Android的开发时,有时候可能刚写完一个布局文件,就急忙忙的运行程序,此时会毫不留情的在控制台报错:No Launcher activity found! The launch will ...

  4. Jenkins入门系列之

    Jenkins入门系列之——00答疑解惑 Jenkins进阶系列之——11修改Jenkins用户的密码 Jenkins进阶系列之——12详解Jenkins节点配置 Jenkins进阶系列之——13修改 ...

  5. HTTP API 设计指南(中文版) restfull

    http://www.css88.com/archives/5121 目录 基础 总是使用TLS 在Accepts头中带上版本号 通过Etags支持缓存 用Request-Ids追踪请求 用Range ...

  6. Oracle获取AWR和ASH

    -- 找到指定的snap select snap_id, max(sample_time) from sys.wrh$_active_session_history group by snap_id ...

  7. 使用 jQuery UI Widget Factory 编写有状态的插件（Stateful Plugins）

    使用 jQuery UI Widget Factory 编写有状态的插件(Stateful Plugins) Note 这一章节的内容是基于 Scott Gonzalez 一篇博客 Building ...

  8. ASP.NET MVC 控制器向View传值的三种方法

    转自:http://www.cnblogs.com/shinima/p/3940452.html 1.提供视图模型对象 你能把一个对象作为View方法的参数传递给视图. public ViewResu ...

  9. 使用CAJViewer 提取PDF文件中的文字

    使用 CAJViewer 7.2 软件,把pdf格式的文件提取出文字. 操作步骤参考:http://jingyan.baidu.com/article/d45ad148cd06e469552b800f ...

  10. C#.NET ,微信退款证书

    微信退款时遇到:基础连接已经关闭 连接被意外关闭. 服务器环境:WIN SERVER 2008 R2.  WINDOWS服务承载的WCF服务,基于.NET FRAMEWORK 3.5. 第一笔交易的退 ...