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

代码实例如下:

<!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. mongodb 查询使用

    > db.jd_58tc_raw.findOne() { "_id" : "2659e4e4caf0504ec4362478e2ed57ca", &quo ...

  2. 20145305 《Java程序设计》第10周学习总结

    学习内容总结 网络编程 网络编程就是在两个或两个以上的设备(例如计算机)之间传输数据.程序员所作的事情就是把数据发送到指定的位置,或者接收到指定的数据,这个就是狭义的网络编程范畴.在发送和接收数据时, ...

  3. 【在线】Actionbar Style Generator：ActionBar风格生成器

    这个ActionBar风格生成器可以让你轻松地创建一个简洁.有吸引力且无漏洞的自定义actionbar.它会生成所有9种必须的patch assets以及相关XML的drawables和styles文 ...

  4. 获取当前访问的url

    1.获取完全url,包含参数: request.getRequestURL(); 2.获取部分: request,getRequestURI 不包含参数,协议名称 获取访问的参数: request.g ...

  5. wall 和panel有啥区别

    Panel指的是一个面板,用它来对一些控件进行分组,就像组合框控件,即Visual Studio里面用的Group Box Control:而在一些软件界面里面也可以表现为工具条,比如编辑工具条.文件 ...

  6. android studio 更新 Gradle错误解决方法

    Android Studio每次更新版本都会更新Gradle这个插件,但由于长城的问题每次更新都是失败,又是停止在Refreshing Gradle Project ,有时新建项目的时候报 Gradl ...

  7. Django: TemplateDoesNotExist at /admin/

    最近用virtualenv 总出现 Django: TemplateDoesNotExist at /admin/的问题,报错TemplateDoesNotExist at /admin/admin/ ...

  8. sublimeText3-EOFError: EOF when reading a line

    最近在自学python,练习网上教程代码的时候遇到: EOFError: EOF when reading a line 发现原因是sublime的console不支持输入,安装SublimeREPL ...

  9. 慕课网-安卓工程师初养成-1-6 MyEclipse的使用简介

    来源 http://www.imooc.com/video/1414 http://www.my-eclipse.cn/ MyEclipse 2014 官方版下载地址  声明:MyEclipse 20 ...

  10. 洛谷P1214 [USACO1.4]等差数列 Arithmetic Progressions

    P1214 [USACO1.4]等差数列 Arithmetic Progressions• o 156通过o 463提交• 题目提供者该用户不存在• 标签USACO• 难度普及+/提高 提交 讨论 题 ...