我需要编写什么 HTML 或 CSS 以使占位符属性的文本可以用鼠标选择/突出显示？答案

【问题标题】：What HTML or CSS do I need to write to make the text of a placeholder attribute selectable / highlightable with a mouse?我需要编写什么 HTML 或 CSS 以使占位符属性的文本可以用鼠标选择/突出显示？
【发布时间】：2018-11-01 14:17:39
【问题描述】：

我怎样才能允许某人使用输入字段的鼠标占位符文本突出显示？现在，我不能只阅读占位符文本，我不知道如何让占位符文本可以通过鼠标突出显示。

这是我的输入字段：

<input 
  locale="en" 
  maxlength="255" 
  placeholder="I want to select, highlight and copy this text" 
  size="255" 
  type="text" 
  name="user[first_name]" 
  id="user_first_name">

编辑：

SO 告诉我这是一个潜在的duplicate。

我认为我的问题可能有所不同，因为我想知道如何让用户用鼠标突出显示和复制 placeholder 文本。链接的 SO 帖子询问如何创建一个按钮，让人们将字段的占位符文本复制到剪贴板。另一方面，我很好奇开发人员如何编写 HTML / CSS 让用户用鼠标复制占位符文本。

编辑 2：

输入表单的最终目标在这里并没有什么特别之处。我刚刚收到客户的请求，他们希望突出显示并复制输入文本字段的占位符文本。我想满足他们的要求，但我也很高兴并且能够向他们解释，他们要求的这个功能是不可能的，因为placeholder 值不能那样工作。我将不胜感激一些描述上述限制的“官方”文档，关于突出显示占位符文本。

【问题讨论】：

你真的做不到。
有人想解释为什么他们投了反对票吗？是因为它可能是重复的吗？
@robskrob。我的回答只需要鼠标，不需要单独的按钮——你只需点击文本框中的文本。
您可以将占位符文本设置为一个值，而不仅仅是占位符
无法（手动）复制占位符文本。这就是占位符的意义所在。显然，您可以使用 jQuery 选择它的值，但我不认为这正是您想要实现的。 我认为，这里的正确问题是，这是否是输入字段的最佳用法。您能否描述一下输入表单的最终目标是什么？

标签： html css forms placeholder

【解决方案1】：

您可以使用value 使其可选择。

    <input 
      locale="en" 
      maxlength="255" 
      placeholder="I want to select, highlight and copy this text" 
      value="I want to select, highlight and copy this text" 
      size="255" 
      type="text" 
      name="user[first_name]" 
      id="user_first_name">

【讨论】：

感谢您的回答，但我不想将文本设置为 value 属性，因为当表单发布时，该值将自动在请求中传递。我不一定希望占位符文本发送到服务器。

【解决方案2】：

此示例将文本直接复制到剪贴板：

您也可以只使用 value，并将其着色为浅灰色，然后在 textchange 上更改颜色，使其看起来像一个占位符。

        <script>
            $('#user_first_name').on('click', function() {
                document.querySelector("#user_first_name").select();
                document.execCommand('copy');
                alert('copied to clipboard');
            });
        </script>

【讨论】：