Textarea 技巧

哦，<textarea>。 你拥有多少怪癖。 这里收集了九个你可能想对 textarea 执行的操作。 尽情享受。

1. 将图片作为 textarea 背景，输入文字时消失。

您可以像其他任何元素一样，为 textarea 添加背景图片。 在这种情况下，图片是一个友好的提醒，要友好 =)。 如果您出于某种原因添加了背景图片，它可能会破坏 textarea 的浏览器默认样式。 默认的 1px 实心粗体边框将被替换为更厚的斜面边框。 要恢复浏览器默认设置，您只需将边框强制恢复正常。

textarea {
  background: url(images/benice.png) center center no-repeat; /* This ruins default border */
  border: 1px solid #888; 
}

一旦文本到达该位置，该背景图片可能会干扰文本的可读性。 以下是一些 jQuery 代码，它将在 textarea 获得焦点时移除背景，如果 textarea 中没有任何文本，则将其放回。

$('textarea')
  .focus(function() { $(this).css("background", "none") })
  .blur(function() { if ($(this)[0].value == '') { $(this).css("background", "url(images/benice.png) center center no-repeat") } });

2. HTML5 占位符文本

HTML5 表单中有一个新的属性称为placeholder。 它在 textarea 中显示淡灰色的文本（也适用于文本样式输入），当 textarea 获得焦点或具有任何值时，该文本将消失。

<textarea placeholder="Remember, be nice!" cols="30" rows="5"></textarea>

HTML5 占位符文本在 Safari 5、Mobile Safari、Chrome 6 和 Firefox 4 alpha 中有效。

3. 占位符文本，HTML5 结合 jQuery 备用方案

我们可以通过 JavaScript 测试来轻松测试特定元素是否支持特定属性。

function elementSupportsAttribute(element, attribute) {
  var test = document.createElement(element);
  if (attribute in test) {
    return true;
  } else {
    return false;
  }
};

然后我们可以编写代码，以便如果浏览器支持 placeholder 属性，我们将使用它，否则，我们将使用 jQuery 模拟该行为。

if (!elementSupportsAttribute('textarea', 'placeholder')) {
  // Fallback for browsers that don't support HTML5 placeholder attribute
  $("#example-three")
    .data("originalText", $("#example-three").text())
    .css("color", "#999")
    .focus(function() {
        var $el = $(this);
        if (this.value == $el.data("originalText")) {
          this.value = "";
        }
    })
    .blur(function() {
      if (this.value == "") {
          this.value = $(this).data("originalText");
      }
    });
} else {
  // Browser does support HTML5 placeholder attribute, so use it.
  $("#example-three")
    .attr("placeholder", $("#example-three").text())
    .text("");
}

4. 移除蓝色辉光

所有 WebKit 浏览器、Firefox 3.6 和 Opera 10 都会在 textarea 获得焦点时在其周围显示一个发光的蓝色边框。 您可以像这样从 WebKit 浏览器中移除它。

textarea {
  outline: none;
}

您也可以将其应用于 :focus 样式，但无论哪种方式都可以。 我还没有找到从 Firefox 或 Opera 中移除它的方法，但是-moz-outline-style是我测试过的最接近的方法。

提醒： 蓝色辉光正在成为一个强大的标准，而破坏该标准通常对您的用户不利。 如果您这样做，您也应该有一个非常有说服力的理由，以及一个同样强大的 :focus 样式。

5. 移除调整大小手柄

WebKit 浏览器在文本区域的右下角附加了一个小的 UI 元素，用户可以使用它通过点击和拖动来调整 textarea 的大小。 如果出于任何原因您想移除它，CSS 就足够了。

textarea {
  resize: none;
}

6. 添加调整大小手柄

jQuery UI 具有一个 可调整大小的交互，可用于 textarea。 它在所有浏览器中都有效，并覆盖了 WebKit 原生版本，因为此版本具有各种花哨的功能（如回调和动画）。

要使用它，请在您的页面上加载 jQuery 和 jQuery UI，并且在最基本的层面上，您可以像这样调用它。

$("textarea").resizable();

7. 自动调整大小以适应内容

James Padolsey 有一个非常棒的 jQuery 脚本，用于 自动调整 textarea 大小（该脚本在互联网上时有时无，所以这里有一个 备份。）

这里有 Louis Lazeris 的另一个，其中还包含指向其他选项的链接。 它的工作方式与您希望的一样。 textarea 最初以正常合理的尺寸开始。 随着您输入越来越多的内容，textarea 会扩展以包含所有这些文本，而不是像默认设置那样触发滚动条。

该插件有多种选项，但在最简单的情况下，您只需加载 jQuery、插件文件并像这样调用它。

$('textarea').autoResize();

这里的另一个技巧是根本不使用 <textarea>，而是使用 <div contenteditable>。 它将自动增长，根本不需要花哨的 JavaScript 帮助 - 除了它不再是真正的表单元素，因此您需要 JavaScript 来提取/发送值。

8. 不换行

要防止文本在 CSS 中正常换行，您可以使用#whatever { white-space: nowrap; }。 但是出于某种原因，这对 textarea 不起作用。 如果您希望能够在 textarea 中键入，并且希望行在您按下回车键之前不换行（而是触发水平滚动条），则必须使用wrap="off"属性。

<textarea wrap="off" cols="30" rows="5"></textarea>

9. 移除 Internet Explorer 中的默认滚动条

IE 默认情况下在所有 textarea 上都显示垂直滚动条。 您可以使用overflow: hidden将其隐藏，但这样您在扩展时就完全不会获得任何滚动条。 值得庆幸的是，自动溢出可以移除滚动条，但在需要时仍会将其放回。

textarea {
  overflow: auto;
}

所有上述示例 都可以在此处查看。