1

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

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

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

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

4

2 回答 2

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。不要被引导相信您必须使用其中一个或另一个，并且出于更多原因（需要一篇文章来介绍所有有效点）而不是我可以动摇的原因，两者都是最好的方法。

于 2013-09-06T19:11:23.240 回答
0

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

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

工作演示

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

您可以这样做以删除所有滑块label元素的该行为...

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

label或使用其 ID删除特定滑块...

$("#slider-label").removeAttr("for");
于 2013-09-06T18:53:01.143 回答