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

代码实例如下:

<!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. EventBroker

    Sample publisher Publish an event topic: ? 1 2 3 4 5 6 7 8 9 10 public class Publisher {     [EventP ...

  2. 无法向会话状态服务器发出会话状态请求请。确保 ASP.NET State Service (ASP.NET 状态服务)已启动

    原文链接:http://www.cnblogs.com/IT-Bear/archive/2012/01/04/2311546.html 无法向会话状态服务器发出会话状态请求.请确保 ASP.NET S ...

  3. ServiceBroker创建流程

    首先为这个数据库开启Service Broker ALTER DATABASE [T_EIP_UnityStore] SET ENABLE_BROKER 创建MessageType CREATE ME ...

  4. [ActionScript 3.0] AS3 绘制正二十面体（线条）

    分析: 正二十面体共有12个顶点.30条棱,其20个面都是正三角形.每条棱所对应的弧度值为1.1071487177940904弧度,这个弧度值可通过求Math.sqrt(5)/5的反余弦值求得.正二十 ...

  5. HTML5的动画学习历程

    一.三角学原理. function getRadio(d){//根据角度获得弧度,                return d*Math.PI/180;                }, fun ...

  6. PS 的参考线

    新建参考线 菜单:"视图-新建参考线", 直接输入想要位置的参考线.   参考线对齐 按住Shift键拉辅助线,辅助线会自动对齐到当前标尺的刻度上.           按住Alt ...

  7. threading event

    #!usr/bin/env python 2 #coding: utf-8 3 #Author: Andy 4 5 import threading 6 import time 7 8 def pro ...

  8. css 使用background背景实现border边框效果

    css中,我们一般使用border给html元素设置边框,但也可以使用background背景来模拟css边框效果,本文章向大家介绍css 使用background背景实现border边框效果,需要的 ...

  9. 聚类结果的评估指标及其JAVA实现

    一. 前言 又GET了一项技能.在做聚类算法的时候,由于要评估所提出的聚类算法的好坏,于是需要与一些已知的算法对比,或者用一些人工标注的标签来比较,于是用到了聚类结果的评估指标.我了解了以下几项. 首 ...

  10. Appium+Maven+TestNG(ReportNG)环境搭建（详细过程）

    最近群里经常有人会问到关于maven构建Appium测试项目以及使用testNG生成测试报告的问题,试着搭建了一下,下面是过程: jdk安装过程我这里就不说了 一.下载eclipse,推荐下载Ecli ...