Paper-Input 2 个竞争中的自动对焦 paper-inputs

Paper-Input autofocus amongst 2 competing paper-inputs

我有 2 个用于搜索引擎的纸质输入(一个在 header 中),它默认自动对焦为 header 一个,当两者都有 "autofocus" 时。

<paper-input id="bodyinput" name="thetext" type="text" class="searchbar" placeholder="Enter a search term here..." autofocus>
</paper-input>

使用JS中的.hide()在首页隐藏了header栏。有什么方法可以让主搜索栏 (non-header) 仅针对我的主页自动对焦?

我在 rails 中分享了一个 _header 部分,它需要在 non-homepages 中自动对焦 header。

也许有一种方法可以通过 JS 仅在主页上以编程方式删除 paper-input 中的 "autofocus" 部分?

正如您可以将自定义元素属性绑定到字符串、数字、对象等一样,您也可以使用布尔值。

在这种情况下,您可以设置一个变量或您选择的 属性 来反映当前页面当前是否为主页。您的代码将负责将其设置为真或假。然后,您可以像这样使用数据绑定:

<paper-input placeholder="Input #1" autofocus="[[isHomepage]]"></paper-input>
<paper-input placeholder="Input #2" autofocus="[[!isHomepage]]"></paper-input>

<script>
  ... isHomepage = true/false; ...
</script>

在此示例中,如果 isHomepage 为真,则第一个 paper-input 已启用自动对焦。如果为假,则为第二个。

这是一个 Plunker,它演示了一个(非常基本的)示例,说明这是如何工作的:http://plnkr.co/edit/L0z4V6FVbtRDcwBk0b02?p=preview