codecamp

第 3 章 步骤 2:添加一个输入框

在这一步中,你将在你的 App 中添加一个输入框。作为一个用户文本输入框,Dart可以从中取得一个值。

编辑 piratebadge.html

在 class 为 widgets 的 <div> 中添加一个 <input> 标签。

...
<div class="widgets">
  <div>
    <input type="text" id="inputName" maxlength="15">
  </div>
</div>
...
  • <input> 标签的 id 是 inputName。Dart 使用 #inputName 的 CSS 选择器从 DOM 中选择这个元素

编辑 piratebadge.dart

在文件的顶部引入 dart:html 库。

import 'dart:html';
  • 这里从 dart:html 引入了所有的类和其他资源。

  • 不要担心臃肿的代码。构建程序会帮你进一步简化代码。

  • dart:html 库包含了所有DOM元素类型。

  • 一会儿你将会使用一些关键字来导入一些特殊的库。

  • Dart 编辑器会提示你导入的库是未被使用的,没关系,下一步我们就会修复它。

添加一个方法来监听输入框

void main() {
  querySelector('#inputName').onInput.listen(updateBadge);
}
  • dart:html 中定义的 querySelector() 方法,获取到了指定的 DOM。这里,通过#inputName选择器获取到了指定的输入框。

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

  • 鼠标和键盘事件被存放在一个流中。

  • 提供一个异步的流数据序列。使用 listen() 方法,可以从流中得到安全的数据。

  • onInput.listen() 监听到了输入框的流事件。当监听到时,updateBadge() 方法被调用。

  • 当用户按下一个键时,将产生一个事件。

  • 你可以用单引号或双引号来创建一个字符串。

  • Dart 编辑器提示你有个方法没有被创建,让我们来解决它。

用一个 top-level 级别的方法来实现一个事件方法。

...
void updateBadge(Event e) { 
  querySelector('#badgeName').text = e.target.value;
}
  • 这个函数将 badgename 元素的值设置成文本输入字段的值。

  • 事件 eupdateBadge 函数的参数. 这个参数的名字是 e;类型是一个 Event

修复警告信息

...
void updateBadge(Event e) { 
  querySelector('#badgeName').text = (e.target as InputElement).value;
}
  • 在这个例子中,e.target 是产生事件的输入源。

运行应用

保存你的文件

右击 piratebadge.html 选择 Run in Dartium

和下面的示例比较一下。

第 2 章 步骤 1:运行一个框架应用
第 4 章 步骤 3:添加一个按钮
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }