了解textarea默认提示文字

textarea是HTML中最常见的表单元素之一，可以用于输入多行文本，它的默认提示文字也是可以通过HTML的属性来设置的，不同浏览器对这个属性的实现也有所不同。下面就让我们从多个方面来了解textarea的默认提示文字吧！

一、简介

textarea是HTML中最常见的表单元素之一，用于输入多行文本。默认情况下，该元素不会有提示文字，当用户点击输入时才会出现光标，用户才能够输入内容。如果我们希望在textarea中设置提示文字，可以通过HTML的placeholder属性来实现。例如：

二、placeholder基本用法

placeholder属性是HTML中的一个非常实用的属性，它可以用来在表单元素中设置提示文字，当用户没有输入内容时，该提示文字会出现在输入框中。

1、通常情况下，我们使用placeholder属性就能够很轻松地实现默认提示文字的功能，例如：

2、在一些高级浏览器中，placeholder属性还会对输入内容进行验证，当输入内容不符合要求时，提示文字会变成红色并显示提示信息。

3、默认情况下，placeholder属性的文字会在用户输入内容后消失。如果希望用户输入内容后仍然可以看到该文字，可以通过CSS实现，例如：

textarea:focus::-webkit-input-placeholder { /* WebKit browsers */
  opacity: 0.5;
}
textarea:focus::-moz-placeholder { /* Mozilla Firefox 19+ */
  opacity: 0.5;
}
textarea:focus:-ms-input-placeholder { /* Internet Explorer 10+ */
  opacity: 0.5;
}
textarea:focus::-ms-input-placeholder { /* Microsoft Edge */
  opacity: 0.5;
}

三、自定义样式

通过CSS，我们也可以自定义textarea的样式，包括提示文字的样式。

1、样式自定义

textarea {
  width: 50%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  background-color: #f8f8f8;
  font-size: 16px;
  resize: none;
}

textarea:focus {
  border: 3px solid #555;
}

2、自定义提示文字样式

::-webkit-input-placeholder { /* WebKit browsers */
  color: red;
  font-style: italic;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  color: red;
  font-style: italic;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
  color: red;
  font-style: italic;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
  color: red;
  font-style: italic;
}

四、兼容性问题

在一些老旧的浏览器中，不支持placeholder属性，为了保证用户的体验，在这些浏览器中我们也需要给出提示文字。

1、通过JavaScript

2、通过CSS

请输入内容

五、总结

在表单中设置提示文字是一个很实用的功能，用户在输入内容前能够看到提示信息会提高用户体验。通过HTML的placeholder属性，我们可以轻松地添加提示文字。我们还可以通过CSS对提示文字样式进行自定义，提高页面的美观度。兼容性问题也需要考虑，对于不支持placeholder属性的浏览器，我们可以通过JavaScript或CSS来提供默认提示文字。