需要幫助使JS功能更加動態

Question

我想要做的是使用JS函數爲窗體中的其他輸入字段。例如，我想要一個LastName和LastNameLabel等。我希望我可以通過某種方式調整函數以找到對Aaa和AaaLabel，以便每個字段都可以具有相同的效果。我的代碼如下。謝謝！

更新：我現在只是試圖讓'原始值'顯示元素ID的名稱，小寫字母后跟大寫字母之間的空格。例如，如果元素ID是姓氏，我希望innerHTML是「姓氏」。感謝你的幫助！！

<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，忽略了一個事實，即內嵌事件處理程序一般是在這些天皺起了眉頭，嘗試一些諸如F其次，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'; 

是你談論你想要與空間的元素ID在這一點上el.id舉辦的「姓氏」，所以如果你在下面的行，你應該使用正則表達式像當年加入以替代'Original Value'部分得到「Last Name」：

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