需要幫助使JS函數更加動態

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

OK，忽略了一個事實，即內嵌事件處理程序一般是在這些天皺起了眉頭，你可以試試以下，其中onclick和onfocus在你的HTML通過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'; 

是您要討論的部分，您要在其中用添加的空格替換元素ID的'Original Value' ，然后在這一點上el.id保留“ LastName”，因此，如果您使用正則表達式（如下面的行），則應獲得“姓”：

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