使一个input文本框随其中内容而变化长度的方法

  发布时间:2014-04-08 17:22:32   作者:佚名   我要评论
这篇文章主要介绍了如何使一个input文本框随其中内容长度变化而变化长度,实现原理很简单,大家看过之后就知道了
(福利推荐:【腾讯云】服务器最新限时优惠活动,云服务器1核2G仅99元/年、2核4G仅768元/3年,立即抢购>>>:9i0i.cn/qcloud

(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun

第一:

复制代码
代码如下:

<input type="text" onkeydown="this.onkeyup();" onkeyup="this.size=(this.value.length>4?this.value.length:4);" size="4">

其中 size="4"就是定义初始的大小,如果这里没有定义,那就把this.size=(this.value.length>4?this.value.length:4);里面的4改成20,<input type="text">的默认size就是20

第二:
如果你在style里定义了width属性,又要让它的width根据内容来变化,两个要求不就矛盾了吗.所以这里不能在style里定义width属性.

相关文章

  • HTML5 placeholder属性详解

    这篇文章主要为大家详细介绍了HTML5 placeholder属性,placeholder属性能够让你在文本框里显示提示信息,感兴趣的小伙伴们可以参考一下
    2016-06-22
  • 让IE下支持Html5的placeholder属性的插件

    Placeholder是HTML5新增的另一个属性,当input或者textarea设置了该属性后,该值的内容将作为灰字提示显示在文本框中,当文本框获得焦点时,提示文字消失
    2014-09-02
  • ie placeholder属性的兼容性问题解决方法

    html 5有个很棒的属性,placeholder,但是在不支持html5的低版本的浏览器中,因此要人为的去实现placeholder属性,下面有个示例,感兴趣的朋友可以参考下
    2014-06-30
  • HTML 5 input placeholder 属性如何完美兼任ie

    这篇文章主要介绍了HTML 5 input placeholder 属性完美兼任ie的方法,需要的朋友可以参考下
    2014-05-12
  • HTML5 placeholder(空白提示)属性介绍

    浏览器引入了许多的HTML5 特性其中我最喜欢的一个就是为input元素引入了placeholder属性,placeholder属性显示引导性文字直到输入框获取输入焦点,当有了用户输入内容后引导
    2013-08-07
  • 限制html文本框input只能输入数字和小数点

    本文主要介绍了限制html文本框input只能输入数字和小数点的方法。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-27
  • 使用placeholder属性设置input文本框的提示信息

    这篇文章主要介绍了使用placeholder属性设置input文本框的提示信息,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-02-19

最新评论

?


http://www.vxiaotou.com