2

How can I allow someone highlight with their mouse placeholder text of an input field? Right now, I cannot only read the placeholder text, and I do not know how to let the placeholder text be selectable with a mouse highlight.

Here is my input field:

<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">

EDIT:

SO tells me this is a potential duplicate.

I think my question is potentially different because I want to know how I would let a user highlight and copy the placeholder text with their mouse. The linked SO post is asking about how to create a button that lets one copy the field's placeholder text to their clipboard. I on the other hand am curious about how a developer could write HTML / CSS to let a user with their mouse copy the placeholder text.

EDIT 2:

The end goal with the input form is nothing special here. I just have a request from a customer that they would like to highlight and copy the placeholder text of an input text field. I would like to accommodate their request, but I am also happy to and able to explain to them that this feature they are asking for as not possible because a placeholder value just does not function that way. I would appreciate some 'official' documentation that describes the above limitation, regarding highlighting placeholder text.

robskrob
  • 2,720
  • 4
  • 31
  • 58
  • 2
    You literally can't do that. – zzzzBov May 22 '18 at 18:12
  • 1
    Anyone want to explain why they down voted? Is it because it could be a duplicate? – robskrob May 22 '18 at 18:20
  • 1
    @robskrob. my answer only requires the mouse and no separate button -- you just click the text in the textbox. – user2796515 May 22 '18 at 18:21
  • 1
    You could maybe set the placeholder text as a value, instead of just placeholder – metaldino21 May 22 '18 at 18:22
  • 2
    It's impossible to (manually) copy placeholder text. That's literally the point of placeholder. Obviously, you can select it's value using jQuery but I don't think that's what exactly you're trying to achieve. **I think, the right question here is, whether this is the optimal usage of the input field. Could you perhaps describe what is your endgoal with the input form?** – Samuel Hulla May 22 '18 at 18:22
  • This is `placeholder` being used as intended. – Brent May 22 '18 at 18:24
  • Sounds like the `placeholder` by design cannot be technically copied. I've searched MDN documentation. Can someone please link to 'official' documentation that states the placeholder text is not to be selectable via a mouse? – robskrob May 22 '18 at 18:25
  • I think I've seen sites that do this, I suspect they do it by using JS/jQuery to copy the placeholder text to `value` when the current `value` is blank when the text box gets focus. Then optionally deleting the `value` if it matches `placeholder` text on blur, but leaving the value if it is different. – jmoerdyk May 22 '18 at 18:28

2 Answers2

2

This example copies the text directly to the clipboard:

You could also just use value, and color it light gray, then change the color on textchange so it appears like a placeholder.

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

You can use value to make it selectable.

    <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">
cassmtnr
  • 927
  • 13
  • 26
  • Thank you for your answer, but I do not want to set the text to the `value` attribute because when the form posts then the value will be automatically passed in the request. I do not necessarily want the placeholder text to go to the server. – robskrob May 22 '18 at 18:33