[英]javascript clear field value input
I am making a simple form and i have this code to clear the initial value: 我正在制作一个简单的表单,我有这个代码来清除初始值:
Javascript: 使用Javascript:
function clearField(input) {
input.value = "";
};
html: HTML:
<input name="name" id="name" type="text" value="Name" onfocus="clearField(this);"/>
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.
我希望该字段仅在输入为空时才具有起始值“Name”。 Thank you in advance!
先感谢您!
do like 喜欢
<input name="name" id="name" type="text" value="Name"
onblur="fillField(this,'Name');" onfocus="clearField(this,'Name');"/>
and js 和js
function fillField(input,val) {
if(input.value == "")
input.value=val;
};
function clearField(input,val) {
if(input.value == val)
input.value="";
};
here is a demo fiddle of the same 这是一个相同的演示小提琴
Here is one solution with jQuery for browsers that don't support the placeholder attribute. 这是一个jQuery适用于不支持占位符属性的浏览器的解决方案。
$('[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();
Found here: http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html 在此处找到: http : //www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html
This may be what you want: 这可能是你想要的:
Working jsFiddle here 在这里工作jsFiddle
This code places a default text string Enter your name here
inside the <input>
textbox, and colorizes the text to light grey. 此代码放置一个默认文本字符串在
<input>
文本框中Enter your name here
,并将文本着色为浅灰色。
As soon as the box is clicked, the default text is cleared and text color set to black. 单击该框后,将清除默认文本并将文本颜色设置为黑色。
If text is erased, the default text string is replaced and light grey color reset. 如果文本被删除,则替换默认文本字符串并重置浅灰色。
HTML: HTML:
<input id="fname" type="text" />
jQuery/javascript: jQuery的/ JavaScript的:
$(document).ready(function() {
var curval;
var fn = $('#fname');
fn.val('Enter your name here').css({"color":"lightgrey"});
fn.focus(function() {
//Upon ENTERING the field
curval = $(this).val();
if (curval == 'Enter your name here' || curval == '') {
$(this).val('');
$(this).css({"color":"black"});
}
}); //END focus()
fn.blur(function() {
//Upon LEAVING the field
curval = $(this).val();
if (curval != 'Enter your name here' && curval != '') {
$(this).css({"color":"black"});
}else{
fn.val('Enter your name here').css({"color":"lightgrey"});
}
}); //END blur()
}); //END document.ready
HTML: HTML:
<input name="name" id="name" type="text" value="Name" onfocus="clearField(this);" onblur="fillField(this);"/>
JS: JS:
function clearField(input) {
if(input.value=="Name") { //Only clear if value is "Name"
input.value = "";
}
}
function fillField(input) {
if(input.value=="") {
input.value = "Name";
}
}
var input= $(this);
input.innerHTML = '';
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.