Question

我想要做的是将JS函数用于表单中的其他输入字段。例如，我希望有一个LastName和LastNameLabel等。我希望我能以某种方式调整函数来找到对Aaa和AaaLabel，这样每个字段都可以有相同的效果。我的代码如下。谢谢！

更新：我现在只是试图获取'原始值'来显示元素ID的名称，并在小写字母后跟大写字母之间留出空格。例如，如果元素ID是LastName，我希望innerHTML是“Last Name”。谢谢你的帮助!!

<script type="text/javascript">
  function LabelOnClick(el) { var associatedFieldId = el.getAttribute('for');
                              if (associatedFieldId)
                                 document.getElementById(associatedFieldId).focus();
                            }
  function FieldOnFocus(el) { document.getElementById(el.id + 'Label').className='FieldFocus';
                            }
  function FieldOnKeyPress(el) { if (event.keyCode!=9 && event.keyCode!=8) { document.getElementById(el.id + 'Label').innerHTML='';
                                                                           }
                               }
  function FieldOnKeyDown(el) { el.style.width = Math.max(30,el.value.length*10)+'px';
                            }

  function FieldOnKeyUp(el) { el.value=el.value.substring(0,1).toUpperCase()+el.value.substring(1,el.value.length);
                              if (el.value=='') document.getElementById(el.id + 'Label').innerHTML='Original Value';

                            }
  function FieldOnBlur(el) { if (el.value=='') { document.getElementById(el.id + 'Label').className='FieldBlur';
                                                 document.getElementById(el.id + 'Label').innerHTML='Original Value';
                                               }
                           }
</script>

<style>
  .InputField { border: 1px dotted lightgray;
                border-bottom:1px solid black;
                min-width: 30px;
                padding: 5px;
                font-family:tahoma, arial, sans-serif;
                font-size: 14px;
  }
  .FieldBlur { color: gray;
               position: absolute;
               padding: 6px;
               padding-left: 8px;
               padding-top: 8px;
               font-family: tahoma, arial, sans-serif;
               font-size: 14px;
  }
  .FieldFocus { color: lightgray;
                position: absolute;
                padding: 6px;
                padding-left: 8px;
                padding-top: 8px;
                font-family: tahoma, arial, sans-serif;
                font-size: 14px;
  }
  .FieldInput { color: black;
                position: absolute;
                padding: 6px;
                padding-left: 8px;
                padding-top: 8px;
                font-family: tahoma, arial, sans-serif;
                font-size: 14px;
  }
</style>

<label id="FirstNameLabel" for="FirstName" class="FieldBlur"
       onclick="LabelOnClick(this)">First Name
</label>

<input id="FirstName" class="InputField" type="text" name="FirstName" maxlength="25"
       onfocus="FieldOnFocus(this)"
       onkeypress="FieldOnKeyPress(this)"
       onkeydown="FieldOnKeyDown(this)"
       onkeyup="FieldOnKeyUp(this)"
       onblur="FieldOnBlur(this)"/>

</body>

Answer 1

好的，忽略内联事件处理程序这些天通常不赞成的事实，尝试类似以下内容，其中HTML中的onclick和onfocus将this传递给相关函数，以便这些函数引用触发事件的元素，以便它们可以确定相关字段或标签是什么：

<script>

function LabelOnClick(el) {
   var associatedFieldId = el.getAttribute("for");
   if (associatedFieldId)
      document.getElementById(associatedFieldId).focus();
}

function FieldOnFocus(el) {
   document.getElementById(el.id + "Label").className='FieldFocus';
}

</script>

<label id="FirstNameLabel" for="FirstName" class="FieldBlur"
       onclick="LabelOnClick(this)">First Name  </label>

<input id="FirstName" ... onfocus="FieldOnFocus(this)" ... />

我将为其他事件做一些类似的事情，作为读者的练习......

编辑以符合您更新的问题：

如果：

document.getElementById(el.id + 'Label').innerHTML='Original Value';

是您要讨论的部分，您想要将'Original Value'替换为添加了空格的元素ID，然后在该点el.id保留“LastName”，因此如果您使用正则表达式你应该得到“姓氏”：

document.getElementById(el.id + 'Label').innerHTML
                      = el.id.replace(/([^A-Z])([A-Z])/g, "$1 $2");

需要帮助使JS函数更具动态性

1 个答案: