清除文本框值 onclick 并显示 onblur

Posted 2023-03-05

【中文标题】清除文本框值 onclick 并显示 onblur

【英文标题】：Clearing the textbox values onclick and displaying 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。

【参考方案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>