javascript - 如何使占位符文本出现而不是值文本

标签 javascript html css

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

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

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

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

最佳答案

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

关于javascript - 如何使占位符文本出现而不是值文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55941002/

相关文章:

javascript - React 不将 div 渲染到 li 标签中

html - 从没有按钮的 HTML 生成 PDF

html - 如何使用 css 设置 Font Awesome 图标或文本的等量间距

javascript - 将鼠标悬停在滚动列表中的图片上

javascript - lightSlider 不是函数,wordpress

javascript - 如何在node/loopback中同步调用model.find方法?

javascript - jQuery 隐藏/显示不起作用,不像 JS 函数

html - 如何删除与另一个元素的边框的一部分?

html - div 在另一个 div 中的位置

javascript - 为什么我们在JavaScript中多次运行时需要清除动画?