JS 함수를보다 동적으로 만드는 데 도움이 필요합니다.

Question

양식의 추가 입력 필드에 JS 함수를 사용하고 싶습니다. 예를 들어, LastName과 LastNameLabel 등을 원합니다. 모든 필드가 동일한 효과를 낼 수 있도록 Aaa와 AaaLabel 쌍을 찾기 위해 함수를 조정할 수 있기를 기대합니다. 내 코드는 아래와 같습니다. 감사!

업데이트 : 이제 요소 ID의 이름을 소문자와 대문자 사이에 공백으로 표시하는 'Original Value'를 얻으려고합니다. 예를 들어, Element ID가 LastName 인 경우 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

, 인라인 이벤트 핸들러는 일반적으로 요즘 눈살을 찌푸리게하고 있다는 사실을 무시하고 F 뭔가를 확인하려고 ollowing에서 HTML의 onclick과 onfocus은 연관된 함수에 패스하여 해당 함수 또는 이벤트가 트리거 된 요소에 대한 참조를 가지므로 관련 필드 또는 레이블이 무엇인지 파악할 수 있습니다.

이 경우

:

<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'; 

당신은 당신이해야 다음 줄에 같은 정규식을 사용, 그래서 만약 el.id는 "성"을 보유하고 그 시점에서 다음 추가 공백 요소 ID로 'Original Value'을 대체 할 위치에 대해 당신이 이야기하고있는 부분이다 "성"을 얻으십시오 :