在文本框中显示标签的javascript问题答案

【问题标题】：javascript issue with displaying labels inside textbox在文本框中显示标签的javascript问题
【发布时间】：2012-02-08 04:17:21
【问题描述】：

您好，我的输入类型文本定义如下

  <input type="text" name="dateInputUserActivity1" value="" id="dateInputUserActivity1" onfocus="HideLabel(this)" onblur="ShowLabel(this)">

我在外部 javascript 文件中定义了函数 HideLabel(textbox) 和 ShowLabel(textbox)，如下所示：

          function HideLabel(txtField){
        if(
           txtField.name=='dateInputResourceEventActivityComparison1' 
            || txtField.name=='dateInputResourceActivityComparison1' 
            || txtField.name=='dateInputResourceEventStatistics1'
            || txtField.name=='dateInputUserImportHistory1'
            || txtField.name=='dateInputUserActivity1'
            || txtField.name=='dateInputUserEventStatistics1'
            || txtField.name=='dateInputUserStatistics1'   // top10distinct chart date
            || txtField.name=='dateInputtop10UserActivity1'
        ){
            if(txtField.value=='From Date')
                txtField.value = '';
            else
                txtField.select();
        }else if(txtField.name=='dateInputResourceEventActivityComparison2'
        || txtField.name=='dateInputUserActivity2'
        || txtField.name=='dateInputUserEventStatistics2'
        || txtField.name=='dateInputResourceActivityComparison2'
        || txtField.name=='dateInputUserImportHistory2'
        || txtField.name=='dateInputUserStatistics2'
        || txtField.name=='dateInputtop10UserActivity2'
        || txtField.name=='dateInputResourceEventStatistics2'){
            if(txtField.value=='To Date'){
                txtField.value = '';

            }
            else{

                txtField.select();
            }
        }
    } 

function ShowLabel(txtField){
        if(
               txtField.name=='dateInputResourceEventActivityComparison1' 
            || txtField.name=='dateInputResourceActivityComparison1' 
            || txtField.name=='dateInputResourceEventStatistics1'
            || txtField.name=='dateInputUserImportHistory1'
            || txtField.name=='dateInputUserActivity1'
            || txtField.name=='dateInputUserEventStatistics1'
            || txtField.name=='dateInputUserStatistics1'   // top10distinct chart date
            || txtField.name=='dateInputtop10UserActivity1'
){
            if(txtField.value.trim()=='')
                txtField.value = 'From Date';
        }else if(
            txtField.name=='dateInputResourceEventActivityComparison2'
        || txtField.name=='dateInputUserActivity2'
        || txtField.name=='dateInputUserEventStatistics2'
        || txtField.name=='dateInputResourceActivityComparison2'
        || txtField.name=='dateInputUserImportHistory2'
        || txtField.name=='dateInputUserStatistics2'
        || txtField.name=='dateInputtop10UserActivity2'
        || txtField.name=='dateInputResourceEventStatistics2'
    ){
            if(txtField.value.trim()==''){
                txtField.value = 'To Date';
                //txtField.type = 'text';
            }
        }
    }

这些是我要修改的所有日期字段文本框，以便在文本框中显示标签。

现在只有 if 语句中的第一个字段在文本框中显示标签，其他字段仅在我关注和关注该字段时才显示标签。如何在页面加载的所有字段上显示标签？

【问题讨论】：

thedailywtf.com 打来电话，他们想要回他们的代码

标签： javascript

【解决方案1】：

你考虑过

<input type="text" name="dateInputUserActivity1" value="" id="dateInputUserActivity1" placeholder="From Date">

关键是placeholder 属性。

【讨论】：

是的，也可以试试……看起来很简单

【解决方案2】：

问题是设置默认值="From Date"，它是空的。所以我在所有文本字段标签中添加了它并且它工作正常。

【讨论】：