html表单没有输入则提示,输入表单为空时如何显示输入指南

我想在文本输入字段中显示引导字母(占位符)

如果指南在文本输入字段的开头显示为浅色字符，则单击并放置光标通常会看到引导字母消失的表单。例如，它是一个如下图所示的形式。

此类指导信函称为占位符。要显示此占位符，您必须先使用JavaScript。但是，从HTML 5开始，现在可以使用专用属性轻松显示。在本文中，我们将介绍两种使用HTML 5的占位符属性显示占位符的方法，并像以前一样使用JavaScript显示占位符。使用占位符属性很容易，但如果使用JavaScript，即使使用IE 9等旧版浏览器，也可以显示它。

使用HTML5占位符属性创建的占位符示例

例如，它显示如下。

查询号码：

以上实例可能具有以下行为。■ 操作1：

如果文本输入字段为空白，则会略微显示引导字母“输入数字”。如果用户在输入字段中甚至写入一个字符，则引导字符消失，并且仅显示用户的输入字符。如果用户清空输入字段，则再次薄薄地显示引导字符“输入数字”。■ 操作2：

如果文本输入字段为空白，则会略微显示引导字母“输入数字”。当用户将光标放在输入字段中时，引导字母消失。如果输入字段为空并且光标移动到另一个位置，则再次显示引导字符“输入数字”。至少，在撰写本文时，在Edge，Firefox，Chrome，Opera的每个最新版本中，它都显示为操作1。但是，在IE 10和IE 11中，它显示为操作2(在IE 9及以下中没有显示任何内容)。无论哪种方式，如果文本输入字段的内容为空并且焦点不在输入字段中(即光标不在输入字段中)，则将显示占位符字符串。

如何仅使用HTML显示占位符

显示占位符的方法非常简单，只需将placeholder属性添加到创建输入字段的input元素中，然后只描述值中的任意字符串。例如，编写HTML如下。

查询号码：placeholder =“输入数字”>

在上述情况下，字符串“输入数字”显示为占位符。显示示例如下。

查询号码：

它只能由此实现。这很简单。

如何用CSS装饰占位符

占位符至少为每个典型的浏览器显示为灰色(浅色)。但是，您可以使用CSS自由更改它。然而，由于相应的情况，浏览器规格为装饰的阶段仍然起草占位符(占位符属性的值)的(工作草案)是一个品种，必须通过增加供应商名称如下所列：有。

/ *▼对于IE 10·IE 11 * / ： - ms - 输入 - 占位符{ 颜色：＃ff 5555;}/ *▼适用于Chrome，Safari，Opera(也适用于※Edge)* /:: - webkit-input-placeholder { 颜色：＃ff 5555;}/ *▼对于Firefox 18或更早版本* /：-moz-placeholder { 颜色：＃ff 5555;}/ *▼对于Firefox 19及以上版本* /:: - moz - 占位符 { 颜色：＃ff 5555;不透明度：1;}/ *▼CSS标准说明(计划)* /：占位符显示 { 颜色：＃ff 5555;}

应用上面的CSS源代码，如下所示。

查询号码：

Edge了解Webkit的描述也很有效

作为单独应用上述浏览器专用CSS的样本页面，准备“ 按占位符供应商前缀的装饰测试 ”。请查看您想要在浏览器中查看哪些说明有效的时间。为了使其更容易理解，添加了使其变粗的装饰。*在Edge的描述中有“:: - ms - input - placeholder”(与IE不同，有两个冒号)，Edge有“:: - webkit - 还应用了“input-placeholder”，因此您无需费心添加专用的Edge描述。*在Firefox中，通过不透明度属性实现颜色的细化，因此必须指定不透明度属性值“1”以使其不透明以便以指定的颜色显示。※我在上面写的只是为了以防万一，可能不再需要编写Firefox 18或更少的描述(Firefox 18于2013年1月发布)。

用于使占位符在光标进入时消失的CSS

在上面的示例中，至少Edge，Firefox，Chrome，Opera，将光标放在输入字段中不会删除占位符。如果要在光标放在输入字段中时删除占位符的字符串，除了上面的CSS源之外，还要编写以下CSS源。

：焦点:: - Webkit的输入占位符{ 颜色：白色; } / *(也可用于※边缘)的Chrome·Safari浏览器·对于*歌剧院/ ：关注：-moz-占位符{ 颜色：白色; } / * Firefox18以前使用* / ：焦点 :: - MOZ-占位符{ 颜色：白色; } / * Firefox19更多* / ：焦点：占位符图示见{ 颜色：白色; } / * CSS标准(计划)的描述* /

如上所述添加焦点伪类，并将文本颜色更改为白色。使用焦点伪类，您可以创建仅适用于“焦点正在获得焦点”的样式。换句话说，上面的CSS是一个装饰“当你获得焦点时，将占位符的字符颜色更改为白色”。通过这样做，您可以在光标进入输入字段时实现擦除占位符(=消失)的操作。由于IE最初是这样的操作，因此在上面省略了使用IE的供应商前缀的描述。此外，由于此处仅占位符的字符串为白色，因此用户输入的字符串不会是白色。显示示例如下。

查询号码：

如果将光标放在输入字段中，占位符的字符串在您放入时就会消失。

注意如何使用占位符

字符串显示为一个占位符，请只配套指南，显示输入实例和输入的内容，标签不要使用为(项目名称)，并输入限制的引导显示。还引导限制标签还，因为如果不是在任何时候都显示的是，“如果项目进入？”这变得很难理解。占位符并不总是显示。用户您成为无形的，如果输入的东西，那里是一个机制的情况下，例如用于(如通过cookie的使用)最后一次串从一开始就被输入，它们串的用户直到我擦掉它才能看到它。此规范可能不适合作为显示标签和限制指南的地方。

如何使用JavaScript创建占位符

为了显示占位符，最简单的方法是使用上一页中介绍的占位符属性。它是HTML 5中添加的属性，无法与IE 9或更低版本的旧浏览器一起显示，但可以与许多具有代表性的浏览器一起显示。此页面后面的解释是在JavaScript中显示占位符。没有必要再用JavaScript创建它，但我会将其编写以供参考。如果想在旧版本的浏览器显示一个占位符，在该示例中，如果有内容被还处理在切换显示/不显示的定时以外，也可能是有在JavaScript实现可能是有用的方法。■ 使用JavaScript创建的占位符的示例显示：下面显示了使用本文介绍的JavaScript实现的占位符函数的输入表单的示例显示。单击输入字段内部并插入光标将消失光导字母。如果将光标移动到外部而不在输入字段中输入任何内容(通过单击页面上的其他位置)，将再次显示引导字母。

JavaScript版本占位符

如果您想在浏览器中查看该行为，请参阅示例页面“ 占位符JavaScript版本 ”。另外，上述占位符用JavaScript实现，其操作如下。

过程1：当光标进入输入字段时，删除占位符字符串。将列中的字符颜色设置为黑色(＃000000)。过程2 :(没有输入任何内容)当光标进入输入字段时，显示占位符的字符串。使列中的文本颜色变为灰色(＃808080)。过程3：阅读页面后立即为了在初始状态下显示占位符，[进程2]仅执行一次。让我们看看如何使用JavaScript创建一个带有上述占位符的文本输入字段。

写文本输入字段写HTML

首先，在HTML中创建一个文本输入字段。在这种情况下，为了使用JavaScript进行控制，请使用以下两个规则描述input元素。

要显示为占位符的内容被描述为title属性的值。将class =“placeholder”的描述添加到使用占位符函数的位置。例如，如果您准备了六个文本输入字段并希望为每个字段显示占位符，请编写HTML源代码，如下所示。

第1项：第2项：第3项：第4项：第5项：第6项：

在上面的源中，六个输入字段用于创建六个文本输入字段。要显示为占位符的字符串被指定为title属性的值，并且值“placeholder”将添加到class属性以指示它是占位符函数的目标。请自由更改title属性的值。查看上述源时，它看起来如下所示。

第1项：第2项：第3项：第4项：第5项：第6项：

由于我们刚刚描述了title属性和class属性，因此这里没有任何内容显示为占位符。

编写JavaScript以实现占位符功能

接下来，编写JavaScript源以为每个文本输入字段添加占位符函数。请在HTML源代码后添加如下内容。

上述24行源实现“使用输入元素的title属性值中描述的字符串作为占位符字符串的功能”。通过在上一页的HTML源之后描述上述JavaScript源，完成占位符功能。只需复制和粘贴所有行即可使用此JavaScript源代码。没有特别需要修改的地方。

实现占位符功能的JavaScript源代码说明

我们将简要描述上述JavaScript源描述的内容。请在定制时参考。■ 类名是在“占位符”的主题添加元素的占位符的功能：首先，在网页中输入要素之一，你需要确定你要添加的占位符功能的输入元素。如上一页所介绍的那样，将属性“class =”占位符“”添加到要添加占位符函数的输入元素是一条规则。因此，通过写入以下行，所有“添加占位符函数的输入元素”都作为数组存储在变量目标中。

var targets = document.getElementsByClassName(' placeholder');

如果要更改指示要应用的占位符函数的类名，请自由重写上述“占位符”部分。要逐个处理存储在此变量目标中的“要添加占位符函数的输入元素”，只需循环遍历for语句，如下所示。

for(var i = 0; i

在此for语句中，描述以下三个过程。

获取焦点时擦除占位符字符串的过程。失去焦点时显示占位符字符串的过程。将占位符字符串显示为初始状态的过程。每个都在下面描述。■ 1。获得焦点时的处理：目标元素获得焦点时的处理(光标进入输入列的时间)在onfocus事件中描述。

targets [i] .οnfοcus= function(){ //如果显示占位符 if(this.value == this.title){ this.value =''; //擦除占位符字符串 this.style.color =' ＃000000 '; //将输入字段的文本颜色恢复为黑色 }}

这里我们将目标输入元素的“当前输入内容(this.value)”与“title属性值(this.title)”进行比较，并在字符串相同时将其擦除。“相同的字符串”表示“输入占位符的内容”。此外，输入字段中的字符颜色更改为黑色(＃000000)。*如果用户输入与“指定为占位符的字符串”完全相同的字符串，则此脚本将识别“显示占位符”。因此，在使用此脚本时，请尽可能将“用户不想输入的字符串”指定为占位符。包含符号等是个好主意。■ 2.聚焦的处理在丢失的时间：处理当对象的元素失去焦点(=定时离开从输入字段的光标)，写入onblur事件。

targets [i] .οnblur= function(){ //如果输入内容为空(或与占位符相同的字符串) if(this.value ==''|| this.value == this.title){ this.value = this.title; //显示占位符 this.style.color =' ＃808080 '; //使文字颜色为灰色 }}

这里，当输入元素的“当前输入内容(this.value)”为空时，输入“title属性值(this.title)”并将输入字段中的字符颜色更改为灰色(＃ 808080)为了使它更容易。这是显示占位符字符串的过程。*在上面的if语句中，不仅添加了“当输入内容为空”时，而且“当输入与占位符相同的字符串时”被添加到条件中。当用户在显示占位符时按下浏览器的重新加载按钮时，这是一种度量。省略该状态下，当在其中显示占位符的状态下用户按下重新加载按钮浏览器(浏览器保持的输入框重新阅读页面时的内容的功能)的占位符默认它将以字体颜色显示。

■ 3。默认显示：在上面的1和2中，仅描述了onfocus事件和onblur事件处理，“在初始状态下显示占位符”的处理不充分。因此，通过编写以下行，我们只在开始时执行“一次onblur事件”。

targets [i] .onblur();

这会导致占位符以初始状态显示。这样，完成了JavaScript的占位符显示功能。最后，我将发布到目前为止我介绍的所有资源。请复制并在尝试使用时使用它。请注意，JavaScript源的描述位置有限制。

在JavaScript中创建占位符函数的源代码摘要

我们将发布到目前为止我们介绍的来源。复制和粘贴时请使用它。下面是HTML源代码，后面是JavaScript源代码。

第1项：
第2项：
第3项：
第4项：
第5项：
第6项：
p>

■ 描述注释在“要添加占位符函数的所有输入元素” 之后，请务必在上面的源代码的后半部分编写JavaScript部分。如果首先执行JavaScript部分，它将无法工作。如果您无法调整JavaScript的执行时间，例如当您想将JavaScript源分成另一个文件时，请使用下一页介绍的源代码。

在JavaScript Source 2中创建占位符函数

如果您无法调整JavaScript的执行时间，例如当您想将JavaScript源分成另一个文件时，请使用以下源代码。■HTML源：

第1项：
第2项：
第3项：
第4项：
第5项：
第6项：
p>

■JavaScript源代码(可以在独立于HTML的文件中编写)：

这个JavaScript将在加载HTML后执行，即使它已加载。因此，在读取目标输入元素之前是否加载它并不重要。与上一页介绍的来源不同的是以下部分。

document.addEventListener('DOMContentLoaded'，function(){ ~~~});

写入此内容的脚本在HTML加载完成后执行。它不是“在完成HTML源的加载之后”，而是“在加载诸如网页上的图像之类的对象之后”。因此，即使具有较长等待时间的页面(例如具有大尺寸图像的页面)也不会被称为“脚本将不会完全运行”。使用上述源的示例页面是“ 占位符JavaScript版本 ”。如果要使用浏览器检查操作，请参阅此示例页面。

如何在文本输入字段中显示引导字母(占位符)

这次，我们介绍了两种在文本输入字段为空时显示占位符的方法，使用HTML 5的占位符属性创建的方法以及使用JavaScript制作的方法。使用HTML5占位符属性的方式非常简单，因此似乎没有必要再费心去制作JavaScript了。请利用方便的方法。

举报/反馈