有没有一种简单的方法可以让按 Enter 键为带有纸张输入的表单执行一些 javascript。我可以抓住每个元素的输入键,但这似乎有点乏味。
问问题
2839 次
2 回答
8
使用当前的 Polymer 版本 1.0,我能够使用iron-a11y-keys解决这个问题。
这是一个绑定到整个表单的示例,它触发任何子输入元素的提交:
<iron-a11y-keys id="a11y" target="[[_form]]" keys="enter"
on-keys-pressed="submitForm"></iron-a11y-keys>
<form is="iron-form" id="form"
method="post"
action="{{url}}">
...
Polymer({
is: 'example-form',
properties: {
_form: {
type: Object,
value: function() {
return this.$.form;
}
}
},
submitForm: function() {
document.getElementById('form').submit();
},
于 2016-01-04T09:00:14.177 回答
5
目前(Polymer 0.3.4)当在paper-input中按下回车键时似乎没有触发任何事件。但是您可以扩展paper-input元素并添加此功能(请参阅扩展Polymer 文档中的其他元素):
<polymer-element name="my-paper-input" extends="paper-input">
<template>
<shadow></shadow>
</template>
...
</polymer-element>
然后您可以在按下返回键时触发自定义事件:
ready: function() {
self = this;
this.$.input.addEventListener('keypress', function(e) {
if (e.keyCode == 13) {
self.async(function() {
self.fire('enter', self.value);
});
}
});
}
为方便起见,输入值被传递给事件处理程序。现在您可以像这样使用新元素:
<my-paper-input ... on-enter="{{inputEntered}}"></my-paper-input>
编辑1:
由于事件在元素层次结构中冒泡,因此可以在周围的表单元素上捕获它:
<my-form on-enter="{{anyInputEntered}}" ...>
然后在一个地方获取所有输入元素的事件(可以通过调用stopPropagation();
事件对象来停止事件传播)。
编辑2:
最好为自定义事件提供唯一的名称,这样它们就不会与将来可能添加的核心事件的名称发生冲突(例如my-unique-prefix-input-entered
)。
于 2014-07-27T23:34:49.687 回答