Question

给出jQuery-mobile滑块的默认代码：

<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的输入配对才能正常运行，因此删除它不是一个解决方案。但是，它们确实提供了通过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" />

会在保留其功能的同时隐藏实际标签“输入滑块：”文本。然后你可以在输入标签前添加'输入滑块：'作为常规文本，点击时不会调用任何东西......因为它现在只是文本。我经常使用这种方法来重新控制输出标签出现位置的样式格式选项，而不是使用实际标签标签文本的非常有限的格式选项。

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

Answer 2

您需要删除label for属性，因此当您点击它时，它不会将焦点放在具有匹配属性标签id的输入元素上。

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

<强> Working demo

如果要在创建后将其删除：

您可以执行此操作以将该行为移除到所有滑块label元素...

$("label.ui-slider").removeAttr("for");

或使用其ID ...

删除特定滑块label

$("#slider-label").removeAttr("for");

为jQuery-mobile滑块禁用文本输入

2 个答案: