javascript - 2 个竞争纸张输入之间的纸张输入自动对焦

Question

我有 2 个用于搜索引擎的纸质输入(一个在标题中)，当两者都像这样具有“自动对焦”时，它将自动对焦默认为标题。

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

在 JS 中使用 .hide() 隐藏首页的标题栏。有什么方法可以仅为我的主页自动聚焦主搜索栏(非标题)？

我在 rails 中共享一个 _header 部分，它需要在非主页中自动聚焦标题。

也许有一种方法可以通过 JS 仅在主页上以编程方式删除页眉的纸张输入中的“自动对焦”部分？

Answer 1

正如您可以将自定义元素属性绑定(bind)到字符串、数字、对象等，您也可以使用 bool 值。

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

<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