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

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

编辑2：

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

Answer 1

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

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

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

Answer 2

您可以使用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">

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

2 个答案: