如何使占位符文本出现而不是值文本答案

【问题标题】：How to make Placeholder text appear instead of Value text如何使占位符文本出现而不是值文本
【发布时间】：2019-05-01 18:37:50
【问题描述】：

我正在尝试制作一个表单，让人们在具有值和不同占位符文本的文本字段中输入 URL。我希望显示占位符而不是值，所以如果他们不在字段中输入任何内容，它会转到原始字段，但链接很长，所以我不希望这些出现在字段中。

我正在使用一个输入字段，其值为特定 LinkedIn 个人资料的 url，但我希望有一个占位符来显示 LinkedIn 的主页 url，因为它要短得多。

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

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

【问题讨论】：

value 确定输入字段中的内容，placeholder 永远不会显示该字段中是否存在某些值。如果您希望用户能够输入其他内容，为什么要事先将 URL 专门存储在输入值中？
我们能看到处理这个输入的javascript代码吗？
@Yannick 因为填写此表格的一些人年龄较大，可能不知道删除表格中的内容，或者可能会意外删除内容。我正在努力使这变得尽可能简单和万无一失。

标签： javascript html css

【解决方案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>

【讨论】：