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

代码实例如下:

<!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. Android NFC开发概述

    NFC手机相比普通手机来说,有以下3个附加功能:  1.可以当成POS机来用,也就是“读取”模式   2.可以当成一张卡来刷,也就是NFC技术最核心的移动支付功能  3.可以像蓝牙.Wi-Fi一样做点 ...

  2. Java日期时间使用总结

    一.Java中的日期概述   日期在Java中是一块非常复杂的内容,对于一个日期在不同的语言国别环境中,日期的国际化,日期和时间之间的转换,日期的加减运算,日期的展示格式都是非常复杂的问题.   在J ...

  3. PXE批量部署linux操作系统

    前言 在实际生产环境中,有时候我们会碰到为几十上百甚至上千台服务器安装Linux操作系统的需求,如果我们还是常规的去使用移动介质逐台安装,显然是一件低效又令人抓狂的事情,那要安装到何年何月啊?这对于我 ...

  4. [ActionScript 3.0] AS3 获取某年某月的天数(Get number of days in a month)

    function getNumberOfDays($year:int, $month:int):int { var month:Date = new Date($year, $month + 1, 0 ...

  5. mysql 如何用root 登录

    mysql -uroot -p 如果没有密码,按两下回车就进去了

  6. wince6.0应用程序自启动

    主要思想:将应用程序添加到image里,然后用应用程序代替桌面应用程序,从而使应用程序自启动. 主要步骤:                 1.将应用程序MyApp.exe拷贝到wince600\OS ...

  7. mm

    1. 实施例子  http://wenku.baidu.com/view/d01d951dfad6195f312ba6e8.html 2. internal number range即内部给号,指系统 ...

  8. OC基础(9)

    OC中的私有方法 @property基本概念 @synthesize基本概念 @property增强 @property修饰符 *:first-child { margin-top: 0 !impor ...

  9. python-appium手机自动化测试（仅需安装包）前期准备（pydev-eclipse编辑器）

    1.jdk安装与环境变量配置教程http://jingyan.baidu.com/article/6dad5075d1dc40a123e36ea3.html 我本机安装的是1.6.043 2.sdk下 ...

  10. 一张图看Google MVP设计架构

    这段时间看了一下Google官方推出的MVP架构案例,决定把对MVP的理解用类图的形式表述一下.MVP架构的设计思想确实非常值得学习,大家如果还不是很了解MVP,建议抽时间去研究研究,相信对大家的架构 ...