如何在 <button> 元素中使用光标选择文本？

Posted 2023-03-06

【中文标题】如何在 <button> 元素中使用光标选择文本？

【英文标题】：How to select a text with a cursor in a <button> element?

【发布时间】：2016-04-02 08:31:13

【问题描述】：

我发现了一个奇怪的行为，我无法在 <button> 元素中选择文本。例如，请尝试在 Bootstrap 的这些按钮中选择一个文本：http://getbootstrap.com/components/#list-group-buttons

这是一些标准行为还是可编辑的？我需要在按钮中选择文本。

【问题讨论】：

根据我的阅读button，类型为 button 没有默认行为，因此这可能取决于浏览器。可以说，如果文本是可选择的......按钮将不合适/不合适。

我可以很好地选择文本。单击元素外部并拖动。

@epascarello，是的，对）但这不是我的选择

当你拖动一个按钮时，它不会选择文本...

【参考方案1】：

你可以做this question的相反操作： 创建以下 CSS3：

.list-group-item
-webkit-touch-callout: text;
-webkit-user-select: text;
-khtml-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;

并链接样式表。它适用于我的 Firefox。

编辑：如 Nenad Vracar 所说，将“全部”更改为“文本”。我现在可以在 Chrome 和 Firefox 中使用它

【讨论】：

不，在 Chrome 中不起作用，47.0.2526.106 m。是的，它看起来像是一种浏览器行为。

旧评论，但只是为了确认、测试并且它至少在 Mac Chrome 69 和 Mac Firefox 6 中工作。但它在 Safari 12 中不起作用。但它确实适用于 user-select: all。但是用户不能选择只选择一个单词，该容器中的所有内容都被选中。 ?

【参考方案2】：

你可以设置user-select: text

button 
  -webkit-user-select: text;  /* Chrome all / Safari all */
  -moz-user-select: text;     /* Firefox all */
  -ms-user-select: text;      /* IE 10+ */
  user-select: text;

<div class="col-sm-4">
  <div class="list-group">
  <button type="button" class="list-group-item">Cras justo odio</button>
  <button type="button" class="list-group-item">Dapibus ac facilisis in</button>
  <button type="button" class="list-group-item">Morbi leo risus</button>
  <button type="button" class="list-group-item">Porta ac consectetur ac</button>
  <button type="button" class="list-group-item">Vestibulum at eros</button>
</div>
</div>

Fiddle

【讨论】：

我建议使用这个前缀堆栈：-webkit-user-select: all; -moz-user-select: text; -ms-user-select: text; user-select: text; 这是因为出于某种原因 Safari 不支持按钮上的user-select: text。

【参考方案3】：

您可以像这样为按钮定义 css 属性 对于按钮类添加 cursor:pointer 属性。 您可以直接指定按钮或自定义 CSS 类

光标：指针

【讨论】：

这无助于回答实际提出的问题