【问题标题】:Text box size should grow when typing键入时文本框大小应增大
【发布时间】:2012-04-24 02:21:48
【问题描述】:

我正在寻找文本框中的效果。 最初文本框的大小会很小,当输入时,文本框会变大。是否有任何 jquery 插件可用于此效果?如果不是,如何实现?

【问题讨论】:

  • 你试过什么?从谷歌开始怎么样..?结果 #3 看起来很有用。 google.com/…
  • 你需要先接受一些答案
  • 我已经准备好接受,但我的声誉应该是 15
  • 您只需要 1 个代表点击复选标记,即接受。我给了你 5 个代表,所以你也可以投票(向上箭头)其中一些答案:)

标签: javascript jquery textbox


【解决方案1】:
$("#mytextbox").keyup(function() {
    $(this).attr("maxLength", $(this).attr("maxLength") + 1);
    $(this).attr("size", $(this).attr("size") + 1);
});

请注意,如果用户在文本框聚焦的情况下按下功能键,则无论如何大小都会增加。您应该监视文本框的值变化:

$("#mytextbox").keyup(function() {
    $(this).attr("size", $(this).val().length + 1);
});

请注意,第二种方法也支持复制/粘贴到输入字段中,而第一种方法不支持,尽管您必须确保用户有足够的空间来复制某些内容(现在,大小为设置为当前值的 +1,这意味着用户在增加大小之前一次只能输入一个字符。

【讨论】:

  • 糟糕,编辑了我的答案,maxlength 应该是 maxLength。如果它对您有用,请不要忘记接受这个答案!
  • 最大长度与物理尺寸不同。并且大小写与 HTML 属性无关。
  • 糟糕,您还需要修改size 属性。 :D
  • 在 jsFiddling 我的回答之后,看来您根本不需要设置 maxlength。这项工作很好:jsfiddle.net/HeyJavascript/MvaUz:D
【解决方案2】:
var $text = $('myselector')
$text.keyup(function() {
    $(this).attr({size : $(this).val().length});
});

这直接从文本框中输入的字符串长度获取大小。

【讨论】:

  • 不幸的是,这个答案不会让用户输入,因为大小将自动等于文本框中已有的内容,这意味着用户将无法输入任何新文本。另外,如果您只修改一个变量,则无需将对象传递给.attr() 函数。只需使用$(this).attr("size", $(this).val().length);
  • 假设文本框有一个默认/起始大小,它可以正常工作。
  • 哎呀,你是对的,我忘了长度实际上比字符串中的字符数大一,因为字符是 0 索引的。这工作正常。 :D
【解决方案3】:

看看这个 jquery 插件:

http://www.unwrongest.com/projects/elastic/

【讨论】:

  • -1 给该网站背后的人。链接页面上的演示不起作用! (我在 Chrome 上。)
  • 我正在使用 chrome,它对我有用吗?你试过这个吗? jsfiddle.net/janjarfalk/r3Ekw
  • jsfiddle 按原样工作,但链接的页面仍然有问题。似乎“弹性”正在处理 textarea,但页面的其余部分并没有一起播放......
猜你喜欢
  • 2015-09-08
  • 2019-02-08
  • 1970-01-01
  • 1970-01-01
  • 2023-03-10
  • 1970-01-01
  • 1970-01-01
  • 2017-08-29
  • 1970-01-01
相关资源
最近更新 更多