步驟 2：添加一個(gè)輸入框

在這一步中，你將在你的 App 中添加一個(gè)輸入框。作為一個(gè)用戶文本輸入框，Dart可以從中取得一個(gè)值。

編輯 piratebadge.html

在 class 為 widgets 的 <div> 中添加一個(gè) <input> 標(biāo)簽。

...
<div class="widgets">
  <div>
    <input type="text" id="inputName" maxlength="15">
  </div>
</div>
...

• <input> 標(biāo)簽的 id 是 inputName。Dart 使用 #inputName 的 CSS 選擇器從 DOM 中選擇這個(gè)元素

編輯 piratebadge.dart

在文件的頂部引入 dart:html 庫。

import 'dart:html';

• 這里從 dart:html 引入了所有的類和其他資源。

• 不要擔(dān)心臃腫的代碼。構(gòu)建程序會(huì)幫你進(jìn)一步簡化代碼。

• dart:html 庫包含了所有DOM元素類型。

• 一會(huì)兒你將會(huì)使用一些關(guān)鍵字來導(dǎo)入一些特殊的庫。

• Dart 編輯器會(huì)提示你導(dǎo)入的庫是未被使用的，沒關(guān)系，下一步我們就會(huì)修復(fù)它。

添加一個(gè)方法來監(jiān)聽輸入框

void main() {
  querySelector('#inputName').onInput.listen(updateBadge);
}

• 在 dart:html 中定義的 querySelector() 方法，獲取到了指定的 DOM。這里，通過#inputName選擇器獲取到了指定的輸入框。

• querySelector() 方法的返回值是一個(gè) DOM 元素。

• 鼠標(biāo)和鍵盤事件被存放在一個(gè)流中。

• 提供一個(gè)異步的流數(shù)據(jù)序列。使用 listen() 方法，可以從流中得到安全的數(shù)據(jù)。

• onInput.listen() 監(jiān)聽到了輸入框的流事件。當(dāng)監(jiān)聽到時(shí)，updateBadge() 方法被調(diào)用。

• 當(dāng)用戶按下一個(gè)鍵時(shí)，將產(chǎn)生一個(gè)事件。

• 你可以用單引號(hào)或雙引號(hào)來創(chuàng)建一個(gè)字符串。

• Dart 編輯器提示你有個(gè)方法沒有被創(chuàng)建，讓我們來解決它。

用一個(gè) top-level 級(jí)別的方法來實(shí)現(xiàn)一個(gè)事件方法。

...
void updateBadge(Event e) { 
  querySelector('#badgeName').text = e.target.value;
}

• 這個(gè)函數(shù)將 badgename 元素的值設(shè)置成文本輸入字段的值。

• 事件 e 是 updateBadge 函數(shù)的參數(shù). 這個(gè)參數(shù)的名字是 e；類型是一個(gè) Event

修復(fù)警告信息

...
void updateBadge(Event e) { 
  querySelector('#badgeName').text = (e.target as InputElement).value;
}

• 在這個(gè)例子中，e.target 是產(chǎn)生事件的輸入源。

運(yùn)行應(yīng)用

保存你的文件

右擊 piratebadge.html 選擇 Run in Dartium。

和下面的示例比較一下。

http://wiki.jikexueyuan.com/project/learn-dart-in-minutes/images/dart1-learn-dart-in-minutes-step-2-add-an-input-field-pic1.png" alt="運(yùn)行" />