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

Question

我正在嘗試創建一個表單，讓人們在具有值和不同占位符文本的文本字段中輸入URL。 我希望占位符顯示而不是值，所以如果他們沒有在字段中鍵入任何內容它會轉到原始字段，但鏈接很長，所以我不希望它們出現在字段中。

我正在使用輸入字段，其值為特定LinkedIn個人資料的url，但我希望有一個占位符來顯示LinkedIn的主頁網址，因為它更短。

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

我只看到輸入字段中顯示的值而不是占位符文本。 我想看看占位符而不是值。

Answer 1

您可以使用JS代碼來驗證輸入字段的值。 然后如果文本框為空，它將獲得原始字段。

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