当用户调整textarea的大小时,onfocus会中断

时间:2017-04-12 15:02:00

标签: javascript jquery html css

https://jsfiddle.net/0bo4ry64/2/

<textarea class='err' style='resize:none;' rows='1' cols='29' placeholder='Enter error message...' onfocus='this.rows=5; this.cols=40;' onblur='this.rows=1; this.cols=29;'"+"name='wiz"+i+"'></textarea>
<textarea class='err' rows='1' cols='29' placeholder='Enter error message...' onfocus='this.rows=5; this.cols=40;' onblur='this.rows=1; this.cols=29;'"+"name='wiz"+i+"'></textarea>

希望小提琴显示出错了。好的,所以我的问题是,我如何做到这一点,如果用户调整textarea的大小,onblur和onfocus事件仍将触发并正确缩小和增长textarea?在小提琴中你会发现两个textarea的一个带有resize disable以显示textarea想要做什么而另一个没有它被禁用。如果您在每个框中单击它们将会增长并单击它们将缩小。在第二个,如果你调整它,然后点击离开和/或它将不会激活事件。

3 个答案:

答案 0 :(得分:0)

textarea的tmux选项会更改CSS而不是其行和列属性。所以,您应该将高度和宽度更改为默认值onblur。

使用jQuery:

$ tmux attach -t session-name

JSFiddle

答案 1 :(得分:0)

所以在玩完之后,输入对象似乎有一些内部属性会发生变化,并阻止cols和rows后来改变大小。因此,我提出了一个解决方案,用一个新的textarea替换自己的预期值,以获得你想要的行为。

ggplot

答案 2 :(得分:0)

如果您查看浏览器开发工具中的html,您会看到事件不会中断。问题是,在调整大小时,浏览器会设置一些样式,如边距,宽度和高度。只需取消它们的onblur,并切换调整大小样式。

<textarea class='err' style='resize:none;' rows='1' cols='29' placeholder='Enter error message...' onfocus='this.rows=5; this.cols=40;this.style.resize="both"' onblur='this.rows=1; this.cols=29;this.style.width="";this.style.height="";this.style.margin="";this.style.resize="none"'></textarea>

我也尝试过使用this.style对象,但由于某种原因,它不能替换调整大小样式onblur,使得模糊的textarea可以调整大小。在Chrome中测试过。

https://jsfiddle.net/0bo4ry64/4/

编辑:我使用内联代码是因为您似乎更喜欢它,但它比Itay提议的方式更干净,更好。如果你想要一个代码块可以处理100个textareas ...