Question

这是我刚刚提出来的一个解决方案让我感到困惑，并且没有在SO搜索任何内容。

标准输入字段：

<input type="input" name="fName" placeholder="Your First Name">

但是，让我们说当有人点击字段或通过按Tab键来显示字段时，我想更新占位符文本。

所以它会变成：

<input type="input" name="fName" placeholder="Your First Name Goes Here">

只是一个非常基本的例子，通过添加＆＃34; Goes Here＆＃34;占位符文本。

可行？甚至可以修改占位符？我不知道。

如果是这样，并且可以通过纯JS或jQuery，我会很高兴看到如何。

Answer 1

这应该这样做（编辑：添加模糊重置）：

$('input[name=fName]').on("click focus",function(){
    $(this).attr("placeholder","Your First Name Goes Here");
}).on("blur",function(){
    $(this).attr("placeholder","Your First Name");
});

更新小提琴：http://jsfiddle.net/6tb8v/1/

Answer 2

要在纯JS中执行此操作，您应使用addEventListener()来获取点击/焦点事件，并使用setAttribute()来设置占位符属性。

var elem = document.getElementsByName("fName")[0];
function appendPlaceholder () {
    elem.setAttribute ("placeholder", "Your First Name Goes Here");
}
elem.addEventListener("click", appendPlaceholder);
elem.addEventListener("focus", appendPlaceholder);
elem.addEventListener("blur", function () {
    elem.setAttribute ("placeholder", "Your First Name");
});

Answer 3

这是一个JS答案。我倾向于不喜欢JQuery。

var myInpt = document.getElementsByTagName('input');

var key;

for(key in myInpt)
{
   myInpt[key].addEventListener('click', updateInpt, true);
}

function updateInput(evt)
{
   this.inpt = evt.srcElement;
   var plchldrText = this.inpt.getAttribute('placeholder');
   this.inpt.setAttribute('placeholder', plchldrText + ' Goes Here');
}

当然，这会将click事件附加到页面上的每个输入元素，并且每次单击它时，都会添加字符串'Goes Here'。哈哈。如果你想这样做，也许你应该在输入中添加一个id并以JS的方式收集它。只是一个想法和一个简单的例子！希望它有所帮助！

使用onClick / onFocus上的新文本更新占位符文本

3 个答案: