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

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 = '';
}

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

Answer 2

您可以根据需要在以下事件处理程序中动态更改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>

JSF中。

考虑到<input>' 的值将在 之后被清除，因此如果您希望在外部对其进行处理onchange()，您可能希望保留最后输入的值。<input type='hidden'>onchange