本章节介绍一下如何让一个文本框的宽度能够随着文本框中的内容的宽度增长而增长，也就是能够实现宽度自适应效果。

代码实例如下:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="author" content="http://www.100sucai.com" />

<title>www.100sucai.com</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文本框实现宽度自适应代码实例，input文本框的更多相关文章

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

    代码实例如下: <!DOCTYPE html> <html><head><meta charset="utf-8"><meta ...

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

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

  3. 小实例---关于input宽度自适应以及多个input框合并拆分

    前两个月,公司内部需要开发关于大数据方面的辅助工具语料分词系统,在这个项目中遇到以下几个主要问题,在此分享~ 一.input宽度根据内定文本宽度自适应 背景:项目需求中,前台展示,需要从后台获取的.t ...

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

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

  5. 可编辑且宽度自适应input

    默认的input项是比较难看的,并且它的宽度还无法随着输入而变化,这样未免有些呆板,不过借助JavaScript可以达到宽度自适应的效果,下面为了方便使用了jQuery: <div class= ...

  6. wxpython 支持python语法高亮的自定义文本框控件的代码

    在研发闲暇时间,把开发过程中比较重要的一些代码做个珍藏,下面的代码内容是关于wxpython 支持python语法高亮的自定义文本框控件的代码,应该是对大家也有用. import keywordimp ...

  7. jquery代码修改input的value值，而页面上input框的值没有改变的解决办法

    问题描述: 在搜索框中输入一些字符,并且点击搜索框右边的五角星做收藏操作时,打开的弹框中Save Search:后面的input中的值被赋值了外面搜索框的值,但是当此次操作完成之后,再次做同样的操作, ...

  8. EasyUI中combobox的使用方法和一个代码实例

    一.easyUI中select下拉框动态添加option选项 问题:想在combobox的下拉项里动态添加一些内容,但是添加不成功.因为jquery easyui的下拉列表combobox是用DIV模 ...

  9. 富文本编辑器嵌入指定html代码

    先把内容放入一个input中 <input id="detail" type="hidden" value="${sysCarousel.det ...

随机推荐

  1. rbenv安装ruby2.3.0在线安装不上。老子出绝招了(更新)

    今天把系统换成Linux mint了.感觉比ubuntu的好用太多,细节真是不错,Ubuntu感觉就是毛坯房,Linux mint真是精装修啊 问题来了.安装rbenv后,然后安装rbenv-buil ...

  2. 使用PHP得到所有的HTTP请求头_还有应答头

    1)如何获取 客户端请求的头部 参考网站: http://www.neatstudio.com/show-377-1.shtml PHP中一般采用getallheaders来获取头部,但事实上,有些模 ...

  3. linux 去掉 ^M

    要去除他,最简单用下面的命令: dos2unix filename 亲测可用   以下方式不可以: set ff=unix  %s/^M//g 可能是^M输入方式有问题 ^M 输入方法: ctrl+V ...

  4. POJ 3744 【矩阵快速幂优化 概率DP】

    搞懂了什么是矩阵快速幂优化.... 这道题的重点不是DP. /* 题意: 小明要走某条路,按照个人兴致,向前走一步的概率是p,向前跳两步的概率是1-p,但是地上有地雷,给了地雷的x坐标,(一维),求小 ...

  5. java模拟用户登录（排除没有验证码情况下，抓取网页信息）

    import java.io.BufferedInputStream;import java.io.BufferedReader;import java.io.IOException;import j ...

  6. AdapterView的相关知识。

    AdapterView集成自ViewGroup,他的主要子类有AbsListView(Listview,GridView),AbsSpinner(Spinner,Gallery). AdapterVi ...

  7. 临时改GCC编译器，重启后失效

    临时改GCC编译器,重启后失效.例如,用如下命令: export CROSS_COMPILE= <gcc 文件所在的目录>/arm-linux-gnueabihf- 本例中使用的命令如下: ...

  8. Linux场景下的辅助命令操作汇总

    ============================================ 1.客户端: SecureCRT 7.1 或者putty 2.FTP 主要是上传文件往Linux,否则我们就的 ...

  9. OC基础(22)

    NSMutableString基本概念 NSMutableString常用方法 NSMutableString练习 *:first-child { margin-top: 0 !important; ...

  10. maven skip tests

    DskipTests=true is short form of -Dmaven.test.skip=true