Question

为了节省空间（并保持更紧凑），我添加了一个带占位符的输入框

<input id="username-search" placeholder="view another users work">

添加用户名后，我想将占位符的文本更改为

<input id="username-search" placeholder="viewing -theuser-'s work">

以及删除用户添加到输入框中的文本，就像输入文本时一样，占位符会消失。

有什么想法吗？

Answer 1

非常简单。试试这个：

var input = document.getElementById('username-search');
input.onclick = function() {
    input.setAttribute('placeholder', "viewing " + input.value + "'s work");
    input.value = '';
}

在框中键入内容，然后单击该框。该值将被删除，但占位符将更新为“查看Adam的工作”。

Answer 2

您可以在placeholder的{{1}}事件处理程序中根据需要更改onchange属性：

<input type="text">

JSFiddle

考虑<input id="username-search" placeholder="view another users work" onchange="changePlaceholder(this)"> <script> function changePlaceholder(input){ if (input.value == '') { input.placeholder = "view another users work"; } else { input.placeholder="viewing " + input.value + "'s work"; input.value=""; } } </script>后<input>的价值将被清除，因此如果您想要做某件事，您可能希望保留onchange()最后输入的值在<input type='hidden'>以外的地方。

输入用户名后编辑占位符html

2 个答案: