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

Question

为了节省空间(并使内容更紧凑)我添加了一个带有占位符的输入框

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

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

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

以及删除用户添加到输入框的文本，因为当输入文本时，占位符会消失。

有什么想法吗？

Answer 1

您可以更改 placeholder在 onchange 中根据需要动态属性<input type="text"> 的事件处理程序:

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

JSFiddle .

考虑到 <input> onchange() 后将清除其值, 所以你可能想保留一个 <input type='hidden'>如果您想在 onchange 之外对其进行处理，则使用最后输入的值.