结合javascript函数答案

【问题标题】：Combining javascript functions结合javascript函数
【发布时间】：2012-05-04 01:49:56
【问题描述】：

您好，我正在使用 javascript 函数在单击文本框时阻止文本框，最初文本框包含它们各自的标签名称，例如：客户名称、公司等。单击文本框时，它会使文本框为空，因此数据可以是类型。为此，我使用的是 javascript 函数，对于每个文本框，我必须有一个单独的函数，谁能告诉我如何组合所有这些函数，每个函数中唯一不同的是文本框中使用的值和文本框名称.

Javascript 函数

    function clientnameclear() {
    if(document.bunkerfrm.clientname.value=="Client Name") {
        var bunkerfrm = document.bunkerfrm.clientname.value="";
        var bunkerfrm = document.bunkerfrm.clientname.focus();
    }
    else {
        var bunkerfrm = document.bunkerfrm.clientname.focus();
    }
}

function clientnamereset() {
    if(document.bunkerfrm.clientname.value=="") {
        var bunkerfrm = document.bunkerfrm.clientname.value="Client Name";
    }
}

function vesselnameclear() {
    if(document.bunkerfrm.vesselname.value=="Vessel Name") {
        var bunkerfrm = document.bunkerfrm.vesselname.value="";
        var bunkerfrm = document.bunkerfrm.vesselname.focus();
    }
    else {
        var bunkerfrm = document.bunkerfrm.vesselname.focus();
    }
}

function vesselnamereset() {
    if(document.bunkerfrm.vesselname.value=="") {
        var bunkerfrm = document.bunkerfrm.vesselname.value="Vessel Name";
    }
}

function compclear() {
    if(document.bunkerfrm.company.value=="Company") {
        var bunkerfrm = document.bunkerfrm.company.value="";
        var bunkerfrm = document.bunkerfrm.company.focus();
    }
    else {
        var bunkerfrm = document.bunkerfrm.company.focus();
    }
}

function compreset() {
    if(document.bunkerfrm.company.value=="") {
        var bunkerfrm = document.bunkerfrm.company.value="Company";
    }
}

Html 代码是

<form name="bunkerfrm" id="bunkerfrm" action="#" method="post"><br>
<input type="text" name="clientname" class="txtbox" value="Client Name" onmousedown="clientnameclear()" onclick="clientnameclear()" onblur="clientnamereset()" />
<br /><br>
<input type="text" name="company" class="txtbox" value="Company" onmousedown="compclear()" onclick="compclear()" onblur="compreset()" />
<br /><br>
<input type="submit" name="submitting" class="bunksubmit" value="Send Your Inquiry" /><br>
 </form>

【问题讨论】：

使用placeholder 属性，这种事情没有必要使用脚本。
您使用的是 HTML 5 吗？如果是，为什么不直接使用placeholder 属性？它在除 IE 之外的所有浏览器中都受支持（惊喜，惊喜），但可以完成这个简单的任务。

标签： javascript html forms function onclick

【解决方案1】：

首先，将默认值存储在某处，例如给定输入的alt。

<form name="bunkerfrm" id="bunkerfrm" action="#" method="post"><br>
<input type="text" name="clientname" alt="Client Name" class="txtbox" value="Client Name" onfocus="clear_text(this);" onblur="reset_text(this);" />
<br /><br>
<input type="text" name="company" class="txtbox" alt="Company" value="Company" onfocus="clear_text(this);" onblur="reset_text(this);" />
<br /><br>
<input type="submit" name="submitting" class="bunksubmit" value="Send Your Inquiry" /><br>
 </form>

然后将输入元素 this 作为参数传递给这些 onfocus/onblur 函数：

function clear_text(elem)
{
    if (elem.value == elem.alt)
        elem.value = "";
}

function reset_text(elem)
{
    if (elem.value == "")
        elem.value = elem.alt;
}

如果输入的值与alt 属性中存储的占位符相同，它将在获得焦点时清除输入。事件onblur 将触发reset_text 函数，该函数将检查值是否为空并将其恢复为存储在alt 属性中的默认占位符。

【讨论】：

【解决方案2】：

使用placeholder:

<input type="text" name="clientname" placeholder="Client Name" class="txtbox" />
<br /><br>
<input type="text" name="company" class="txtbox" placeholder="Company" />
<br /><br>
<input type="submit" name="submitting" class="bunksubmit" placeholder="Send Your Inquiry" /><br>
</form>

【讨论】：

【解决方案3】：

我建议您使用和/或研究现有的库，例如：

现场http://fuelyourcoding.com/scripts/infield/
清除字段http://labs.thesedays.com/projects/jquery/clearfield/

【讨论】：