POLYMER：在 paper-item 下嵌套 paper-input 会禁用空格键

Question

我运行遇到了一个奇怪的聚合物问题。在 paper-item 元素下嵌套 paper-input 元素时，paper-input 不会注册 space 栏。

示例：

<template>
    <paper-item class="to-do-item">
        <paper-checkbox active="{{done}}"></paper-checkbox>
        <paper-input id="test1" value="Test1"></paper-input>
    </paper-item>
    <paper-input id="test2" value="Test2"></paper-input>
</template>

在这个例子中，test1 和 test2 都会接受输入，但是我不能在 test1 中输入 spaces 而我可以输入 spaces 在 test2。如果我复制并粘贴一个 space 字符，它在任一输入中都有效。离奇。有人知道怎么回事吗？

编辑：该问题在设备和浏览器、桌面和移动设备上是一致的。

Answer 1

paper-item 元素实现了两种行为：

Polymer.IronControlState
Polymer.IronButtonState

我认为让空格键触摸事件不可用，如果你愿意，你可以用iron-item元素替换paper-item。

Answer 2

根据 github development issue，问题是聚合物将 space 解释为按钮点击，而不是输入。该问题正在处理中，但在此期间，注释掉 IronButtonState 行为是一种可行的解决方法。

behaviors: [
  Polymer.IronControlState/*,
  Polymer.IronButtonState*/
]

Answer 3

此处描述了另一种可用的解决方法： https://github.com/PolymerElements/paper-item/issues/103

用户SPessall的想法是将polymer-item的_spaceKeyDownHandler()函数的实现替换为一个空函数，这可以通过以下代码轻松完成：

ready: function(){
  this.$$('paper-item')._spaceKeyDownHandler = function () {};
}

POLYMER：在 paper-item 下嵌套 paper-input 会禁用空格键

POLYMER: Nesting paper-input under paper-item disables spacebar

javascript

input

polymer

polymer-1.0