从0到1：HTML5+CSS3修炼之道
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

第3章 新增属性

3.1 公共属性

HTML5新增了很多公共属性。所谓的公共属性，指的是可以应用于大多数元素的属性，而并不只限于某一个元素。其中，HTML5新增的常见公共属性有4个。

▶ hidden

▶ draggable

▶ contenteditable

▶ data-*

除了以上这些，HTML5还新增了另外3个公共属性：contextmenu、dropzone、spellcheck。不过由于这3个属性兼容性非常差，在实际开发中也极少用得上，我们可以直接忽略。

3.1.1 hidden属性

在HTML5中，我们可以使用hidden属性来显示或隐藏某一个元素。

语法

<element hidden="hidden"></element>

说明

hidden只有一个属性值：hidden。当然，你也可以简写为：<element hidden></element>。其中，element是一个元素。

举例

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
</head>
<body>
  <div hidden>海贼王</div>
  <div>火影忍者</div>
</body>
</html>

浏览器预览效果如图3-1所示。

图3-1 hidden属性

3.1.2 draggable属性

在HTML5中，我们可以使用draggable属性来定义某一个元素是否可以被拖动。

语法

<element draggable="true或false" ></element>

说明

draggable有两个属性值：true和false。默认值为false。当取值为true时，表示元素可以被拖动；当取值为false时，表示元素不可以被拖动。

举例

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <style type="text/css">
    p
    {
      display: inline-block;
      padding: 10px;
      border:1px dashed gray;
      background-color:#F1F1F1;
    }
  </style>
</head>
<body>
  <p draggable="true">这是一段可以被拖动的文字</p>
</body>
</html>

浏览器预览效果如图3-2所示。

图3-2 draggable属性

分析

当我们使用鼠标左键长按时，会发现p元素可以被拖动。有些小伙伴就会问了：“为什么我松开鼠标左键后，元素位置却没有改变呢？”

其实draggable="true"只能定义元素可以被拖动这一个行为，拖动后并不会改变元素的位置。如果想要改变元素的位置，需要结合“第4章 元素拖放”中介绍的技巧来实现，这个我们在后面会详细介绍。

3.1.3 contenteditable属性

在HTML5中，我们可以使用contenteditable属性来定义某个元素的内容是否可以被编辑。

语法

<element contenteditable="true或false" ></element>

说明

contenteditable有两个属性值：true和false。默认值为false。当取值为true时，元素内容可以被编辑；当取值为false时，元素内容不能被编辑。

举例

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <style type="text/css">
    p{
      display: inline-block;
      padding: 10px;
      border:1px dashed gray;
      background-color:#F1F1F1;
    }
  </style>
</head>
<body>
  <p contenteditable="true">这是一段可以被编辑的文字</p>
</body>
</html>

浏览器预览效果如图3-3所示。

图3-3 contenteditable属性

分析

当我们点击p元素后，发现里面的文字可以被编辑了。

3.1.4 data-*属性

在HTML5中，我们可以使用data-*属性来为元素实现自定义属性。

语法

<element data-*="属性值" ></element>

说明

“data-”只是一个前缀，后面接一个小写的字符串，例如data-color、data-article-title等。

举例

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <script>
    window.onload = function(){
      var oP = document.getElementsByTagName("p")[0];
      oP.style.color=oP.dataset.color;
    }
  </script>
</head>
<body>
  <p data-color="red">你的努力程度之低，根本轮不到拼天赋。</p>
</body>
</html>

浏览器预览效果如图3-4所示。

图3-4 data-*属性

分析

我们可以使用DOM操作中的obj.dataset.xxx来获取data-*属性的值。其中，obj是一个DOM对象，xxx是data-的后缀字符。可能有些小伙伴对具体操作还不是很清楚，我们再多举一个例子。

举例

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <script>
    window.onload = function(){
      var oLi = document.getElementsByTagName("li");
      for(var i=0; i<oLi.length; i++){
        console.log(oLi[i].innerText + "：" +oLi[i].dataset.fruitPrice +"/斤");
      }
    }
  </script>
</head>
<body>
  <ul>
    <li data-fruit-price="￥6.5">苹果</li>
    <li data-fruit-price="￥12.5">香蕉</li>
    <li data-fruit-price="￥3.5">西瓜</li>
  </ul>
</body>
</html>

浏览器预览效果如图3-5所示。

图3-5 data-*属性

分析

在使用JavaScript获取data-*属性的值时，要注意书写格式。

▶ 如果是data-xxx格式，则应该写成obj.dataset.xxx。例如data-color应该写成obj.dataset.color，而data-content应该写成obj.dataset.content。

▶ 如果是data-xxx-yyy格式，则应该写成obj.dataset.xxxYyy。例如data-fruit-price应该写成obj.dataset.fruitPrice，而data-animal-type应该写成obj.dataset.animalType。

那么使用data-*来自定义一个属性究竟有什么用呢？事实上，自定义属性在JavaScript动画以及实际开发中用得是非常多的，暂时不用纠结太多，这个是后面高级部分的知识。

3.2 input元素的新增属性

为了提高开发效率，以及达到更好的用户体验，HTML5为input元素新增了大量的属性。其中，在实际开发中用得最多的有以下5个。

▶ autocomplete

▶ autofocus

▶ placeholder

▶ required

▶ pattern

注意，上面这些新增属性只是针对input元素，并非所有元素都有。除了上面列出的，我们在其他地方可能会看到formaction、formmethod、formtarget等。不过这些属性在实际开发中极少会用到，感兴趣的小伙伴可以自己去搜索了解一下。

3.2.1 autocomplete属性

在HTML5中，我们可以使用autocomplete属性来实现文本框的自动提示功能。

语法

<input type="text" autocomplete="on或off" />

说明

autocomplete属性有两个属性值：on和off。on表示开启，off表示关闭。

autocomplete属性一般都是结合datalist元素来实现自动提示功能。

autocomplete属性适用于所有文本框型的input元素，包括text、password、email、url、tel等。

举例

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
</head>
<body>
  <form method="post">
    <input type="text" autocomplete="on" list="tips" />
    <datalist id="tips">
      <option value="HTML"></option>
      <option value="CSS"></option>
      <option value="JavaScript"></option>
      <option value="Vue.js"></option>
      <option value="React.js"></option>
      <option value="Angular.js"></option>
    </datalist>
  </form>
</body>
</html>

浏览器预览效果如图3-6所示。

图3-6 默认效果

分析

从外观上来看，这个文本框跟普通文本框没有任何区别。当我们输入内容时，文本框会自动匹配datalist元素中的选项并且弹出匹配列表，效果如图3-7所示。

图3-7 输入内容时效果

3.2.2 autofocus属性

默认情况下，文本框是不会自动获取焦点的，必须点击文本框才会获取。我们经常可以看到很多页面一打开时，文本框就已经自动获取到了焦点，例如百度首页。在HTML5之前，都是使用JavaScript的focus()方法来实现的，这种方式相对来说比较麻烦。

在HTML5中，我们可以使用autofocus属性来实现文本框自动获取焦点。

语法

<input type="text" autofocus="autofocus" />

说明

autofocus只有一个属性值：autofocus。当然，你也可以直接简写为：<input type="text"autofocus />。

autofocus属性也适用于所有文本框型的input元素，包括text、password、email、url、tel等。

举例

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
</head>
<body>
  <form method="post">
    <input type="text" autofocus />
  </form>
</body>
</html>

浏览器预览效果如图3-8所示。

图3-8 autofocus属性

分析

小伙伴们把autofocus属性删除，然后刷新一下页面，对比一下前后效果的区别，就知道它的作用是什么了。

3.2.3 placeholder属性

在HTML5中，我们可以使用placeholder属性为文本框添加提示内容。

语法

<input type="text" placeholder="提示内容" />

说明

placeholder属性适用于所有文本框型的input元素，包括text、password、email、url、tel等。

举例

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
</head>
<body>
  <form method="post">
    <input type="text" placeholder="请输入账号" /><br/>
    <input type="text" placeholder="请输入密码" />
  </form>
</body>
</html>

浏览器预览效果如图3-9所示。

图3-9 placeholder属性

3.2.4 required属性

在HTML5中，我们可以使用required属性来定义文本框输入内容不能为空。如果文本框为空，则不允许提交。

语法

<input type="text" required="required" />

说明

required只有一个属性值：required。当然，你也可以简写为：<input type="text" required />。

required属性适用于所有文本框型的input元素，包括text、password、email、url、tel等。

举例

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
</head>
<body>
  <form method="post">
    <input type="text" required /><br/>
    <input type="submit" value="提交" />
  </form>
</body>
</html>

浏览器预览效果如图3-10所示。

图3-10 默认效果

分析

如果文本框为空，点击【提交】按钮后，会弹出提示框，效果如图3-11所示。

图3-11 提交时效果

3.2.5 pattern属性

在HTML5中，我们可以使用pattern属性来为文本框添加验证功能。

语法

<input type="text" pattern="正则表达式" />

说明

pattern属性取值是一个正则表达式。正则表达式内容比较多，不了解的小伙伴可以参考绿叶学习网开源的正则表达式教程，这里就不再详细展开介绍了。

此外，email、url、tel这3个类型的input元素，本质上都内置了pattern属性，因此它们会自动进行相关匹配验证。

举例

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
</head>
<body>
  <form method="post">
    <input type="text" pattern="^[a-zA-Z]\w{4,9}$" /><br/>
    <input type="submit" value="提交"/>
  </form>
</body>
</html>

浏览器预览效果如图3-12所示。

图3-12 默认效果

分析

pattern="^[a-zA-Z]\w{4,9}$"表示文本框的内容必须符合“以字母开头，包含字母、数字或下划线，并且长度在5~10之间”的规则。如果不符合条件，则会弹出提示框，如图3-13所示。

图3-13 提交时效果

3.3 form元素的新增属性

在HTML5中，form元素的新增属性中比较重要的只有一个，那就是：novalidate。从“2.2表单元素”这一节我们可以知道，email、tel、url等类型的input元素中内置的验证机制默认会自动执行。但是在某些情况下，我们需要使用JavaScript来创建更为复杂且健全的验证，这时就要覆盖原有的验证机制了。现在问题来了，怎么覆盖呢？

在HTML5中，我们可以使用novalidate属性来禁用form元素的所有文本框内置的验证功能。

语法

<form novalidate="novalidate">
  ……
</form>

说明

novalidate只有一个属性值：novalidate。当然，你也可以直接简写为：<form novalidate></form>。

举例

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
</head>
<body>
  <form method="post" novalidate>
    <p><label>电子邮箱：<input type="email" /></label></p>
    <p><label>手机号码：<input type="tel" /></label></p>
    <input type="submit" value="提交" />
  </form>
</body>
</html>

浏览器预览效果如图3-14所示。

图3-14 novalidate属性

分析

在上面这个例子中，我们为form元素添加了novalidate属性，因此当点击按钮提交表单时，form元素内的文本框就不会采用浏览器内置的验证机制，然后我们就可以使用JavaScript来创建新的验证规则，请看下面的例子。

举例

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <style>
    p{margin:0;padding:0;margin-top:8px;margin-bottom: 8px;}
  </style>
  <script>
    window.onload=function(){
      var oBtn = document.getElementById("btn");
      var oEmail = document.getElementsByTagName("input")[0];
      var oTel = document.getElementsByTagName("input")[1];
      var errorEmail = document.getElementById("errorEmail");
      var errorTel = document.getElementById("errorTel");
      var oForm = document.getElementsByTagName("form")[0];
      //正则表达式
      var regEmail = /^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/;
      var regTel = /^1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$/;
      //点击按钮后进行验证
      oBtn.onclick = function(){
        if(!regEmail.test(oEmail.value)){
          errorEmail.innerHTML = "请输入正确的邮箱地址";
        }else{
          errorEmail.innerHTML="";
        }
        if(!regTel.test(oTel.value)){
          errorTel.innerHTML = "请输入正确的手机号码";
        }else{
          errorTel.innerHTML="";
        }
        //如果验证都通过，则提交表单
        if(regEmail.test(oEmail.value)&& regTel.test(oTel.value)){
          oForm.onsubmit();
        }
      };
    }
  </script>
</head>
<body>
  <form method="post" novalidate>
    <p><label>电子邮箱：<input type="email" /></label><span id="errorEmail"></span></p>
    <p><label>手机号码：<input type="tel" /></label><span id="errorTel"></span></p>
    <input id="btn" type="button" value="提交" />
  </form>
</body>
</html>

浏览器预览效果如图3-15所示。

图3-15 自定义验证功能

分析

在这个例子中，我们使用novalidate属性来禁用所有文本框内置的验证功能，这样我们就可以使用JavaScript来定义自己的一套验证方法，而不会跟内置的验证功能冲突。

3.4 本章练习

单选题

1．在HTML5中，我们可以使用（ ）属性来为文本框添加正则验证。

A．required

B．pattern

C．validate

D．novalidate

2．在HTML5中，我们可以使用（ ）属性来实现文本框自动获取焦点。

A．autofocus

B．autocomplete

C．placeholder

D．required

3．下面有关HTML5新增公共属性的说法中，正确的是（ ）。

A．<div hidden></div>可以等价于<div style="visibility:hidden"></div>

B．定义了draggable="true"的元素在拖动后，位置也会改变

C．使用JavaScript来获取data-bg-color属性值时，应该写成obj.dataset.bgColor

D．我们可以使用editable属性来定义一个元素的内容是否可以被编辑

4．下面有关input元素新增属性的说法中，正确的是（ ）。

A．autocomplete属性只适用于<input type="text" />

B．我们可以使用autocomplete="true"来实现文本框的自动提示功能

C．<input type="text" autofocus="autofocus" />等价于<input type="text" autofocus />

D．required属性可以配合正则表达式来为文本框添加验证功能

编程题

请为单行文本框定义一个验证功能，要求只能匹配11位数字，其他字符都不匹配。

上一章目录下一章