Onclick事件来删除文本输入字段中的默认值 [英] Onclick event to remove default value in a text input field

问题描述

我有一个输入字段：

 < input name =Namevalue =输入您的姓名> 
  

当用户点击时，如何取消预定义的文本（输入您的姓名）该框。

据我所知，Javascript是最好的方法来做到这一点。如果有错，请通知我。 您可能想要占位符功能：

 < input name =名称placeholder =输入您的姓名/> 
  

旧版浏览器的Polyfill

不适用于某些较旧的浏览器，但存在polyfills （某些要求jQuery，其他人不会）修补该功能。

拧紧它，我会自己做。

如果您想推出自己的解决方案，可以使用元素的 onfocus 和 onblur 事件以确定其价值应该是什么：

 < input name =Namevalue =输入您的姓名
&onfocus =（this.value =='Enter Your Name'）&&（this.value =''）
 onblur =（this.value ==''）&&（ this.value ='输入您的姓名'）/> 
  

避免将HTML与JavaScript混合使用

您会发现我们大多数人都不喜欢从 onblur 和 onfocus 等属性评估JavaScript。相反，通常鼓励将这个逻辑与JavaScript完全绑定。当然，它有点冗长，但它在逻辑和标记之间保持了很好的分离：

  var nameElement = document。 forms.myForm.Name; 
 
函数nameFocus（e）{
 var element = e.target || window.event.srcElement; 
 if（element.value ==输入您的姓名）element.value =; 
} 
 
函数nameBlur（e）{
 var element = e.target || window.event.srcElement; 
 if（element.value ==）element.value =输入您的姓名; 
} 
 
 if（nameElement.addEventListener）{
 nameElement.addEventListener（focus，nameFocus，false）; 
 nameElement.addEventListener（blur，nameBlur，false）; 
} else if（nameElement.attachEvent）{
 nameElement.attachEvent（onfocus，nameFocus）; 
 nameElement.attachEvent（onblur，nameBlur）; 
} 
  

演示： http://jsbin.com/azehum/2/edit

I have an input field:

<input name="Name" value="Enter Your Name">

How would I get it to remove the pre-defined text (Enter Your Name) when the user clicks the box.

As far as I am aware Javascript is the best way to do this. If that wrong please inform me.

解决方案

HTML5 Placeholder Attribute

You are likely wanting placeholder functionality:

<input name="Name" placeholder="Enter Your Name" />

Polyfill for Older Browsers

This will not work in some older browsers, but polyfills exist (some require jQuery, others don't) to patch that functionality.

"Screw it, I'll do it myself."

If you wanted to roll your own solution, you could use the onfocus and onblur events of your element to determine what its value should be:

<input name="Name" value="Enter Your Name"
       onfocus="(this.value == 'Enter Your Name') && (this.value = '')"
       onblur="(this.value == '') && (this.value = 'Enter Your Name')" />

Avoid Mixing HTML with JavaScript

You'll find that most of us aren't big fans of evaluating JavaScript from attributes like onblur and onfocus. Instead, it's more commonly encouraged to bind this logic up purely with JavaScript. Granted, it's a bit more verbose, but it keeps a nice separation between your logic and your markup:

var nameElement = document.forms.myForm.Name;

function nameFocus( e ) {
  var element = e.target || window.event.srcElement;
  if (element.value == "Enter Your Name") element.value = "";
}

function nameBlur( e ) {
  var element = e.target || window.event.srcElement;
  if (element.value == "") element.value = "Enter Your Name";
}

if ( nameElement.addEventListener ) {
  nameElement.addEventListener("focus", nameFocus, false);
  nameElement.addEventListener("blur", nameBlur, false);
} else if ( nameElement.attachEvent ) {
  nameElement.attachEvent("onfocus", nameFocus);
  nameElement.attachEvent("onblur", nameBlur);
}

Demo: http://jsbin.com/azehum/2/edit

这篇关于Onclick事件来删除文本输入字段中的默认值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！