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

Question

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

这是我的输入字段：

<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告诉我这是一个潜在的重复。

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

编辑2：

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

标签： htmlcssformsplaceholder

Answer 1

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

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

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