JavaScript 清除字段值输入

javascript clear field value input

本文关键字：输入 字段 清除 JavaScript      更新时间：2023-09-26

我正在制作一个简单的表单，我有以下代码来清除初始值：

Javascript：

function clearField(input) {
    input.value = "";
};

.html：

<input name="name" id="name" type="text" value="Name" onfocus="clearField(this);"/>

但我不希望的是，如果用户填写输入但再次单击它，它就会被删除。我希望该字段仅在输入为空时才具有起始值"Name"。提前谢谢你！

喜欢

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

和 js

function fillField(input,val) {
      if(input.value == "")
         input.value=val;
};
function clearField(input,val) {
      if(input.value == val)
         input.value="";
};

更新

这是相同的演示小提琴

这是 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();

在这里找到：http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html

这可能是你想要的：

在这里工作 jsFiddle

  • 此代码将默认文本字符串Enter your name here放在<input>文本框内，并将文本着色为浅灰色。

  • 单击该框后，将清除默认文本，并将文本颜色设置为黑色。

  • 如果擦除文本，则会替换默认文本字符串并重置浅灰色。

.HTML： 

<input id="fname" type="text" />

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：

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

.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 = '';

OP 的问题不再相关 - 这个问题是在 2013 年提出的，当时占位符属性没有得到很好的支持。

如今，您只需使用<input placeholder="Your text here">

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefplaceholder

相关文章：