在 Android 和 iOS 上，无法使用 ons-sliding-menu 在 <input type="text"> 中使用 "Select All" 文本

Question

如果在滑动菜单中，Android(4.4 - 6.0) 和 iOS(9.3.1) 文本菜单 "Select All" 都无法正常工作。

（"Copy"、"Cut" 和 "Paste" 工作正常。）

见下文 Android 或 iOS。

http://codepen.io/nf_takahashi/pen/oxqbJw

这是一个错误吗？！

ons.bootstrap();

<ons-sliding-menu main-page="page1.html" menu-page="menu.html" side="left" max-slide-distance="250px" var="menu">
</ons-sliding-menu>

<ons-template id="page1.html">
  <ons-page>
    <ons-toolbar>
      <div class="left">
        <ons-toolbar-button ng-click="menu.toggleMenu()">
          <ons-icon icon="ion-navicon" style="font-size: 32px; width: 1em;"></ons-icon>
        </ons-toolbar-button>
      </div>
      <div class="center">Page 1</div>
    </ons-toolbar>

    <p style="text-align: center; color: #999; padding-top: 100px;"><input type=text></p>
    
  </ons-page>
</ons-template>


<ons-template id="page2.html">
  <ons-page>
    <ons-toolbar>
      <div class="left">
        <ons-toolbar-button onclick="menu.toggleMenu()">
          <ons-icon icon="ion-navicon" style="font-size: 32px; width: 1em;"></ons-icon>
        </ons-toolbar-button>
      </div>
      <div class="center">Page 2</div>
    </ons-toolbar>

    <p style="text-align: center; color: #999; padding-top: 100px;">Page2 Contents</p>
  </ons-page>
</ons-template>

<ons-template id="menu.html">
  <ons-list>
    <ons-list-item modifier="chevron" onclick="menu.setMainPage('page1.html', {closeMenu: true})">
      page1.html
    </ons-list-item>
    <ons-list-item modifier="chevron" onclick="menu.setMainPage('page2.html', {closeMenu: true})">
      page2.html
    </ons-list-item>
  </ons-list>
</ons-template>

Answer 1

我也认为这是一个错误，因为无论其他组件如何，输入都应该保持可选。尽管事实证明它是由于 Onsen 1 使用的库 Hammer.js 的错误默认值而创建的。

修复:

您可以在调用 ons.bootstrap() 之前从默认设置中删除该选项。
```
delete Hammer.defaults.behavior.userSelect;
ons.bootstrap();
```
您可以做的另一件事就是删除禁用：
```
document.querySelector('ons-sliding-menu').onselectstart = document.querySelector('.onsen-sliding-menu__main').onselectstart = null;
```
请注意，此修复必须在滑动菜单 created/ready 之后执行。因此，在您的情况下，只需将其包装在 ons.ready(function(){ /* fix */ }) 中就足够了。

如果稍后创建带有滑动菜单的页面，则需要等待页面初始化，然后应用修复。

这里有一个 demo，您可以在其中看到正在执行的两个修复程序。

无论如何，第一个修复可能更容易，但我最初只是想到了第二个，所以我决定也包括它。

在 Android 和 iOS 上，无法使用 ons-sliding-menu 在 <input type="text"> 中使用 "Select All" 文本

On Android and iOS, not working "Select All" text in <input type="text"> with ons-sliding-menu

onsen-ui