Javascript 当用户调整文本区域的大小时，onfocus会中断

---

希望小提琴能显示出问题所在。好的，我的问题是，我如何使它，如果用户调整文本区域的大小，onblur和onfocus事件仍然会激发，并正确地缩小和扩大文本区域？在fiddle中，您将发现两个textarea，一个带有resize disable（调整大小禁用）以显示textarea的功能，另一个没有禁用。如果你点击每一个框，它们会变大，点击掉它们会变小。在第二种情况下，如果调整其大小，则单击“离开”和/或“进入”将不会激活事件。

textarea的

resize

选项将更改其CSS而不是行和列属性。因此，您应该将高度和宽度更改为默认值onblur

使用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);
});

---

textarea的

resize

选项将更改其CSS属性，而不是行和列属性。因此，您应该将高度和宽度更改为默认值onblur

使用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);
});

---

因此，在玩游戏之后，输入对象似乎有一些内部属性会发生变化，并防止col和rows随后更改大小。所以我想出了一个解决方案，用一个新的textarea替换它自己，这个textarea具有期望的值，可以获得你想要的行为

---

因此，在玩游戏之后，输入对象似乎有一些内部属性，这些属性会发生更改，并防止col和rows随后更改大小。所以我想出了一个解决方案，用一个新的textarea替换它自己，这个textarea具有期望的值，可以获得你想要的行为

---

如果您在浏览器开发工具中查看html，您将看到事件没有中断。问题是，在“调整浏览器大小”上设置了一些样式，如边距、宽度和高度。只需将其取消设置为模糊，并切换调整大小样式

<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>

我也尝试过使用这个.style对象，但由于某些原因，它不能取代模糊上的调整大小样式，使模糊的文本区域可以调整大小。在铬中测试

---

编辑：我使用内联代码是因为您似乎更喜欢它，但是按照Itay建议的方式来做会更干净更好。如果你想，一个代码块可以处理100个文本区域。

如果你在浏览器开发工具中查看html，你会看到事件不会中断。问题是，在“调整浏览器大小”上设置了一些样式，如边距、宽度和高度。只需将其取消设置为模糊，并切换调整大小样式

<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>

我也尝试过使用这个.style对象，但由于某些原因，它不能取代模糊上的调整大小样式，使模糊的文本区域可以调整大小。在铬中测试

---

编辑：我使用内联代码是因为您似乎更喜欢它，但是按照Itay建议的方式来做会更干净更好。如果您想…

调整大小后事件仍然有效，那么一个代码块可以处理100个文本区域。检查html以查看属性的更改，即使在调整大小后为onblur，事件在调整大小后仍然有效。检查html以查看属性的更改，即使在调整大小后为onblur确定，这确实有效，谢谢，但我忘记了一个细节，我有很多文本区域，因此使用类名不起作用，因为它们都具有相同的类名，我很抱歉这会起作用。当使用

$（this）

，而不是类名选择器时。不确定为什么要用focusin/focusout替换focus/blur，但它工作得很好，而且比内联的东西好得多。你可能想像我在回答中那样设置调整大小的样式。好的，这确实有效，谢谢，但我忘记了一个细节，我有很多文本区域，所以使用类名不起作用，因为它们都有相同的类名，我很抱歉这会起作用。当使用

$（this）

，而不是类名选择器时。不确定为什么要用focusin/focusout替换focus/blur，但它工作得很好，而且比内联的东西好得多。你可能想像我在回答中那样设置调整大小的样式。这是可行的，但是我怎样才能让它变为原来的大小并保留占位符呢？不管我怎么想，谢谢你的帮助。就像我对事件处理程序所做的那样复制这些属性。嘿，如果我回答了你的问题，你能适当地投票/选择吗？谢谢这是可行的，但我怎样才能让它精确到原来的大小并保留占位符呢？不管我怎么想，谢谢你的帮助。就像我对事件处理程序所做的那样复制这些属性。嘿，如果我回答了你的问题，你能适当地投票/选择吗？谢谢