javascript - 当用户调整文本区域大小时 onfocus 中断

Question

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>

希望 fiddle 能指出问题所在。好的，我的问题是，如果用户调整文本区域的大小，onblur 和 onfocus 事件仍然会触发并正确缩小和增大文本区域，如何做到这一点？在 fiddle 中，您会发现两个文本区域，一个禁用了调整大小以显示文本区域应该执行的操作，另一个则没有禁用它。如果你点击每个方框，它们就会变大，点击离开，它们就会缩小。在第二个中，如果您调整它的大小，然后单击和/或进入它不会激活事件。

Answer 1

textarea 的 resize 选项会更改它的 CSS，而不是它的 rows 和 cols 属性。因此，您应该将高度和宽度更改为默认的模糊值。

使用 jQuery:

$(".err").on('focusin', function() {
    $(this).attr('rows', 5).attr('cols', 40);
});

$(".err").on('focusout', function() {
    $(this).css({'height': '', 'width': ''})
    .attr('rows', 1).attr('cols', 29);
});

JSFiddle