2018-10-10 22:03:03 +00:00
|
|
|
---
|
|
|
|
id: bad87fee1348bd9aedf08830
|
|
|
|
challengeType: 0
|
2019-12-26 12:05:59 +00:00
|
|
|
videoUrl: 'https://scrimba.com/p/pVMPUv/cKdJDhg'
|
|
|
|
forumTopicId: 16647
|
2020-10-01 15:54:21 +00:00
|
|
|
title: 给输入框添加占位符文本
|
2018-10-10 22:03:03 +00:00
|
|
|
---
|
|
|
|
|
|
|
|
## Description
|
2019-12-26 12:05:59 +00:00
|
|
|
<section id='description'>
|
|
|
|
<code>Placeholder</code>占位符是用户在<code>input</code>输入框中输入任何东西前的预定义文本。
|
|
|
|
你可以像这样创建一个占位符:
|
|
|
|
<code><input type="text" placeholder="this is placeholder text"></code>
|
|
|
|
</section>
|
2018-10-10 22:03:03 +00:00
|
|
|
|
|
|
|
## Instructions
|
2019-12-26 12:05:59 +00:00
|
|
|
<section id='instructions'>
|
|
|
|
把<code>input</code>输入框的<code>placeholder</code>占位符文本设置为 “猫咪图片地址”。
|
|
|
|
</section>
|
2018-10-10 22:03:03 +00:00
|
|
|
|
|
|
|
## Tests
|
|
|
|
<section id='tests'>
|
|
|
|
|
|
|
|
```yml
|
|
|
|
tests:
|
2020-03-03 13:41:15 +00:00
|
|
|
- text: 给现有的<code>input</code>输入框添加一个<code>placeholder</code>属性。
|
2019-12-26 12:05:59 +00:00
|
|
|
testString: assert($("input[placeholder]").length > 0);
|
2020-03-03 13:41:15 +00:00
|
|
|
- text: 设置<code>placeholder</code>属性的值为 ”猫咪图片地址“。
|
2019-12-26 12:05:59 +00:00
|
|
|
testString: assert($("input") && $("input").attr("placeholder") && $("input").attr("placeholder").match(/猫咪图片地址/gi));
|
2020-03-03 13:41:15 +00:00
|
|
|
- text: 完整的<code>input</code>元素应有一个结束标签
|
|
|
|
testString: assert(!code.match(/<input.*\/?>.*<\/input>/gi));
|
|
|
|
- text: <code>input</code>输入框的语法必须正确。
|
|
|
|
testString: assert($("input[type=text]").length > 0);
|
2018-10-10 22:03:03 +00:00
|
|
|
```
|
|
|
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
## Challenge Seed
|
|
|
|
<section id='challengeSeed'>
|
|
|
|
|
|
|
|
<div id='html-seed'>
|
|
|
|
|
|
|
|
```html
|
|
|
|
<h2>CatPhotoApp</h2>
|
|
|
|
<main>
|
2019-12-26 12:05:59 +00:00
|
|
|
<p>点击查看更多<a href="#">猫咪图片</a>。</p>
|
|
|
|
|
|
|
|
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="一只仰卧着的萌猫"></a>
|
|
|
|
|
|
|
|
<p>猫咪最喜欢的三件东西:</p>
|
2018-10-10 22:03:03 +00:00
|
|
|
<ul>
|
2019-12-26 12:05:59 +00:00
|
|
|
<li>猫薄荷</li>
|
|
|
|
<li>激光笔</li>
|
|
|
|
<li>千层饼</li>
|
2018-10-10 22:03:03 +00:00
|
|
|
</ul>
|
2019-12-26 12:05:59 +00:00
|
|
|
<p>猫咪最讨厌的三件东西:</p>
|
2018-10-10 22:03:03 +00:00
|
|
|
<ol>
|
2019-12-26 12:05:59 +00:00
|
|
|
<li>跳蚤</li>
|
|
|
|
<li>打雷</li>
|
|
|
|
<li>同类</li>
|
2018-10-10 22:03:03 +00:00
|
|
|
</ol>
|
|
|
|
<input type="text">
|
|
|
|
</main>
|
|
|
|
```
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</section>
|
|
|
|
|
|
|
|
## Solution
|
|
|
|
<section id='solution'>
|
|
|
|
</section>
|
2019-12-26 12:05:59 +00:00
|
|
|
|