如何显示占位符文本而不是值文本

Question

I am trying to make a form that lets people input a URL in a text field that has a value and a different placeholder text. I want the placeholder to show up instead of the value so if they don't type anything in the field it goes to the original field, but the links are very long so I don't want those to show up in the field.

I am using an input field with the value the url for a specific LinkedIn profile but I would like to have a placeholder to show LinkedIn's homepage url as it is much shorter.

<input 
  id="linkedIn" 
  type="text" 
  value="https://www.linkedin.com/company/stack-overflow" 
  placeholder="https://www.linkedin.com">

I am seeing only the value and not the placeholder text showing in the input field. I would like to see the placeholder instead of the value.

Answer 1

You can use JS code to verify the value of input field. Then if the textbox be empty it will get he original field.

<input 
id="linkedIn" 
type="text" 
placeholder="https://www.linkedin.com">
<input type="button" value="send" onclick="myFunction()">

<script>
    function myFunction(){
        var linkedIn = document.getElementById("linkedIn");
        if(linkedIn.value == ""){
            linkedIn.value = "https://www.linkedin.com/company/stack-overflow";
        }
    }
</script>