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

代码实例如下:

<!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. label 行距

    NSMutableAttributedString * attributedString1 = [[NSMutableAttributedString alloc] initWithString:te ...

  2. (easy)LeetCode 205.Isomorphic Strings (*)

    Given two strings s and t, determine if they are isomorphic. Two strings are isomorphic if the chara ...

  3. 动画的特效Interpolator

    AccelerateDecelerateInterpolator 在动画开始与结束的地方速率改变比较慢,在中间的时候加速 AccelerateInterpolator  在动画开始的地方速率改变比较慢 ...

  4. 在SoCEDS环境下编译和更新preloader和uboot程序的方法

    在SoCEDS环境下编译和更新preloader和uboot程序的方法   前面有介绍preloader在HPS boot过程中的的作用,接下来讲述下用户在SoCEDS环境下改如何编译preloade ...

  5. T4 assembly

    In a T4 template the executing assembly is not yours but one from the T4 engine. To access types fro ...

  6. 程序员必备：Oracle日常维护命令

        上一篇讲了Linux的日常维护命令,这篇讲讲Oracle的日常维护命令.工作中需要使用Oracle数据库的童鞋们,相信或多或少都需要对Oracle做一些基本的维护操作,例如导入导出总该有吧?( ...

  7. Android——主流分辨率

    VGA:480*640 QVGA:240*320 HVGA:320*480 WVGA:480*800 FWVGA:480*854 IntelHaxm.exe  模拟器加速器

  8. OC基础(26)

    集合对象的内存管理 Copy copy与内存管理 @property中的copy关键字 自定义的类实现copy操作 *:first-child { margin-top: 0 !important; ...

  9. OC基础(10)

    id类型 SEL类型 *:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !im ...

  10. cocos2d3.0跑酷代码讲解和源码

    最近在网上看到一个跑酷代码的例子,写的很不错,连接如下 http://www.waitingfy.com/archives/783 现在我把他精简了一下,去除了一些比较简单的特效,着重保留了主角的跳跃 ...