javascript - 禁用 jQuery 移动 slider 点击时的文本输入

Question

给定 jQuery 移动 slider 的默认代码:

<label for="slider-1">Input slider:</label>
<input type="range" name="slider-1" id="slider-1" value="60" min="0" max="100" />

默认行为是单击标签字段不会执行任何操作，但点击标签字段会在移动设备上显示文本输入。

如何禁用此行为，以便标签在移动设备上显示为纯文本？

Answer 1

这应该可以实现您想要做的事情，而不会破坏标签标记与其关联输入的属性。我手头没有移动设备，因此无法对此进行测试。

<label for="slider-1" onclick='return false;'>Input slider:</label>

好处是它可以防止默认行为，同时保留与输入的辅助功能关联。

使用 jQuery，我们可以使用 PreventDefault() 对文档中的所有标签实现同样的效果；功能。

$('label').click( function(event) {
  event.preventDefault();
});

或者在较新版本的 jQuery 中使用“on”处理程序，如下所示...

$('label').on('click', false);

jQuery mobile 要求您有一个与输入配对的标签，UI 才能正常运行，因此删除它并不是解决方案。但是，它们确实提供了通过用户界面本身隐藏标签的功能

参见http://jquerymobile.com/demos/1.2.0/docs/forms/docs-forms.html

在此示例中，您将隐藏实际的标签文本，同时保留 jQuery Mobile 和辅助功能的标签功能。

<label for="slider-1" class="ui-hidden-accessible">Input slider:</label>
Input slider:<input type="range" name="slider-1" id="slider-1" value="60" min="0" max="100" />

将隐藏实际标签“输入 slider :”文本，同时保留其功能。然后，您可以将“输入 slider :”作为常规文本添加到输入标记前面，单击该标记时不会调用任何内容...因为它现在只是文本。我经常使用这种方法来重新控制输入标 checkout 现位置的样式格式化选项，而不是使用实际标签标签文本的非常有限的格式化选项。

此外，请记住不要陷入 SO 上存在的最大思维陷阱之一，那就是您必须使用 jQuery 或普通 javascript，而实际上您可以混合使用它们并同时使用两者时间，为您带来 jQuery 库的人们鼓励混合使用 jQuery 和普通 JavaScript。不要被引导相信你必须使用其中一个，并且使用两者是最好的方法，因为更多的原因(需要一篇文章来讨论所有有效的观点)比我可以动摇的更多。 p>