清除文本框值 onclick 并显示 onblur答案

【问题标题】：Clearing the textbox values onclick and displaying onblur清除文本框值 onclick 并显示 onblur
【发布时间】：2013-02-26 11:53:39
【问题描述】：

有没有办法清除默认文本框值 onclick on textbox 并在表单页面上显示多个文本框的 onblur ？

【问题讨论】：

你有没有尝试过？你想要一个类似占位符的行为吗？是textbox 还是input？应该点击什么？文本框本身？它应该总是被清除吗？还是仅在特定条件下？
是的，我想在表单页面上的多个文本框中使用占位符类型的行为
您可以使用 HTML5 占位符标签<input type="text" placeholder="Enter something..." /> - 这是您想要的吗？（jsfiddle.net/fnkr/69pt9/)[Preview 这里]
是的，我知道，但它在 IE 中不起作用
@sahilagarwal：又是textbox 还是input？表现出一些努力，在你的问题和你尝试过的内容中至少包含一点你的 HTML。

标签： javascript

【解决方案1】：

function Clear1(str)
{    
   document.getElementById(str).value= "";
}

function Clear2(str2)
{    
var aa1=document.getElementById(str2);
	if (aa1.value==""){  
    document.getElementById(str2).style.backgroundColor = "#ffcccc"; 
	}else{
    document.getElementById(str2).style.backgroundColor = "#ffffff";   
  }
}

<input type="text" value="test1" onClick="Clear1(this.id);" id="textbox1" onblur="Clear2(this.id);">
<input type="text" value="test2" onClick="Clear1(this.id);" id="textbox2" onblur="Clear2(this.id);">
<input type="text" value="test3" onClick="Clear1(this.id);" id="textbox3" onblur="Clear2(this.id);">
<input type="text" value="test4" onClick="Clear1(this.id);" id="textbox4" onblur="Clear2(this.id);">

https://jsfiddle.net/warunamanjula/qy0hvmyq/1/

【讨论】：

【解决方案2】：

单线解决方案

  <input type="text" value="" onClick="this.value='';" id="textbox1">

或

 <input type="text" value="" onClick="this.value=='Initial Text'?this.value='':this.value;" id="textbox1">

【讨论】：

这样每次都会清除它，而不仅仅是默认值。您可能需要一个标志来表明这是不是第一次。
<input type="text" value="" onClick="this.value=='Initial Text'?this.value='':this.value;" id="textbox1">

【解决方案3】：

HTML：

<input type="text" value="" onClick="Clear();" id="textbox1>
<input type="text" value="" onClick="Clear();" id="textbox2>
<input type="text" value="" onClick="Clear();" id="textbox3>
<input type="text" value="" onClick="Clear();" id="textbox4>

Javascript：

function Clear()
{    
   document.getElementById("textbox1").value= "";
   document.getElementById("textbox2").value= "";
   document.getElementById("textbox3").value= "";
   document.getElementById("textbox4").value= "";
}

您的问题对我来说有点含糊，但是单击上面的内容会清除所有文本框。希望这对您有所帮助。

【讨论】：

DRY function Clear(obj){obj.value=''} 并致电 <input type="text" value="" onClick="Clear(this);" id="textbox1>