blocks|key|245413|text|HTML：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|245414|<input+name="name"+id="name"+type="text"+value="Name"+onfocus="clearField(this);"+onblur="fillField(this);"/>|code-block|syntax|javascript|245415|JS：|245416|function+clearField(input)+{
++if(input.value=="Name")+{+//Only+clear+if+value+is+"Name"
++++input.value+=+"";
++}
}
function+fillField(input)+{
++++if(input.value=="")+{
++++++++input.value+=+"Name";
++++}
}|245417|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>HTML:</p>

<pre><code>&lt;input name="name" id="name" type="text" value="Name" onfocus="clearField(this);" onblur="fillField(this);"/&gt;
</code></pre>

<p>JS:</p>

<pre><code>function clearField(input) {
  if(input.value=="Name") { //Only clear if value is "Name"
    input.value = "";
  }
}
function fillField(input) {
    if(input.value=="") {
        input.value = "Name";
    }
}
</code></pre>


blocks|key|29212|text|喜欢吗？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|29213|<input+name="name"+id="name"+type="text"+value="Name"+
+++onblur="fillField(this,'Name');"+onfocus="clearField(this,'Name');"/>|code-block|syntax|javascript|29214|和js|29215|function+fillField(input,val)+{
++++++if(input.value+==+"")
+++++++++input.value=val;
};

function+clearField(input,val)+{
++++++if(input.value+==+val)
+++++++++input.value="";
};|29216|更新|29217|下面是一个相同的demo+fiddle|offset|length|29218|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/WkYHx/^0|0|0|0|0|0|8|B|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|10|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|12|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|13|8|@]|9|@$O|14|P|15|1|16]]|A|$]]|$1|Q|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]]]

<p>do like</p>

<pre><code>&lt;input name="name" id="name" type="text" value="Name" 
   onblur="fillField(this,'Name');" onfocus="clearField(this,'Name');"/&gt;
</code></pre>

<p>and js</p>

<pre><code>function fillField(input,val) {
      if(input.value == "")
         input.value=val;
};

function clearField(input,val) {
      if(input.value == val)
         input.value="";
};
</code></pre>

<h3>update</h3>

<p>here is a <a href="http://jsfiddle.net/WkYHx/">demo fiddle</a> of the same</p>


blocks|key|29318|text|对于不支持占位符属性的浏览器，这里有一个使用jQuery的解决方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|29319|$('[placeholder]').focus(function()+{
++var+input+=+$(this);

++if+(input.val()+==+input.attr('placeholder'))+{
++++input.val('');
++++input.removeClass('placeholder');
++}
}).blur(function()+{
++var+input+=+$(this);

++if+(input.val()+==+''+%7C%7C+input.val()+==+input.attr('placeholder'))+{
++++input.addClass('placeholder');
++++input.val(input.attr('placeholder'));
++}
}).blur();|code-block|syntax|javascript|29320|点击此处：http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html|offset|length|29321|entityMap|0|LINK|mutability|MUTABLE|url|http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html^0|0|0|5|24|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<p>Here is one solution with jQuery for browsers that don't support the placeholder attribute.</p>

<pre><code>$('[placeholder]').focus(function() {
  var input = $(this);

  if (input.val() == input.attr('placeholder')) {
    input.val('');
    input.removeClass('placeholder');
  }
}).blur(function() {
  var input = $(this);

  if (input.val() == '' || input.val() == input.attr('placeholder')) {
    input.addClass('placeholder');
    input.val(input.attr('placeholder'));
  }
}).blur();
</code></pre>

<p>Found here: 
<a href="http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html">http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html</a></p>


blocks|key|245571|text|+var+input=+$(this);++++
+input.innerHTML+=+'';|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|245572|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code> var input= $(this);    
 input.innerHTML = '';
</code></pre>


blocks|key|29365|text|OP的问题不再相关-这个问题是在2013年提出的，当时占位符属性没有得到很好的支持。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|29366|现在你可以只使用<input+placeholder="Your+text+here">|offset|length|style|CODE|29367|https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefplaceholder|29368|entityMap|0|LINK|mutability|MUTABLE|url^0|0|8|10|0|0|2E|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@$D|S|E|T|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|U|8|@]|9|@$D|V|E|W|1|X]]|A|$]]|$1|J|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|K|$L|$5|M|N|O|A|$P|I]]]]

<p>OP's question is no longer relevant- the question was asked in 2013 when the placeholder attribute wasn't well supported.</p>
<p>Nowadays you can just use <code>&lt;input placeholder=&quot;Your text here&quot;&gt;</code></p>
<p><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefplaceholder" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefplaceholder</a></p>


<p>I am making a simple form and i have this code to clear the initial value:</p>

<p>Javascript:</p>

<pre><code>function clearField(input) {
    input.value = "";
};
</code></pre>

<p>html:</p>

<pre><code>&lt;input name="name" id="name" type="text" value="Name" onfocus="clearField(this);"/&gt;
</code></pre>

<p>But what i don't want is that if the user fills the input but clicks it again, it gets erased. I want the field to have the starter value "Name" only if the input is empty. Thank you in advance!</p>


javascript clear field value input

我正在制作一个简单的表单，我有以下代码来清除初始值：Javascript：function clearField(input) {    input.value = "";};html：<input name="name" id="name" type="text" value="Name" onfocus="clea...

问javascript清除字段值输入
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问javascript清除字段值输入EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问javascript清除字段值输入
EN