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

代码实例如下:

<!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. git重写历史记录

    1 修改上一次历史提交,替换掉上次的提交git commit --amend 2 git rebase 将不同分支路径合并到同一分支路径上eg:将master分支上的 conflic rebase合并 ...

  2. ASP.NET优化

    源地址:http://www.cnblogs.com/wangjingblogs/archive/2013/02/27/2934706.html http://jingyan.baidu.com/ar ...

  3. mysql如何给汉字按照首字母顺序排序

    select * from 表名 order by convert(列明 USING gbk) COLLATE gbk_chinese_ci asc

  4. 基于nginx和uWSGI在Ubuntu上部署Djan

    http://www.jianshu.com/p/e6ff4a28ab5a 文/Gevin(简书作者)原文链接:http://www.jianshu.com/p/e6ff4a28ab5a著作权归作者所 ...

  5. Hive分布式的数据仓库

    1.hive介绍 hive是一个数据仓库的解决方案,它的数据存储依赖于HDFS,数据结算依赖于MR,也就是说,hive就是一个在数据仓库的服务,它只需要安装到一台普通的PC上即可,仅仅对外提供SQL服 ...

  6. PHP 文件读取 fread、fgets、fgetc、file_get_contents 与 file 函数

    fread().fgets().fgetc().file_get_contents() 与 file() 函数用于从文件中读取内容. fread() fread() 函数用于读取文件(可安全用于二进制 ...

  7. 翻译：为 URL Rewrite 模块创建重写规则

    原文名称:Creating Rewrite Rules for the URL Rewrite Module 原文地址:http://www.iis.net/learn/extensions/url- ...

  8. ASP.NET5 中静态文件的各种使用方式

    所谓静态文件,包含HTML文件,css文件.图片文件和js文件等,他们是服务器直接读取到客户端的一些资源,在这篇文章中,我们将解释关于ASP.NET5和静态文件的一些内容. 服务端的静态文件 默认情况 ...

  9. cocos2d-x Android版游戏之中国移动SDK嵌入

    . 拷贝API 将SDK\runtime\CMBilling20007.jar拷贝至游戏工程的runtime目录下(或其他目录) ,但切记不能放在libs目录下编译,否则编译报错(如:bad rang ...

  10. 应用OpenCV进行OCR字符识别

    opencv自带一个字符识别的例子,它的重点不是OCR字符识别,而主要是演示机器学习的应用.它应用的是UCI提供的字符数据(特征数据). DAMILES在网上发布了一个应用OpenCV进行OCR的例子 ...