자바 스크립트 단순화 - Onclick, Onblur, Onfocus - 양식

Question

내 자바 스크립트 코드를 단순화 할 수있는 방법이 있습니까?

그것은 작동하지만 나는 분명히 내 기본 자바 스크립트 기술을 분명히 보여주는 것을 줄이는 방법이 있어야하며, 물론 내 이해를 향상 시키려고 노력하고있다.

내 HTML 코드 단순한 형태 :

<div> 
<form action=""> 
    <input type="text" name="firstname" id="un1" value="First Name"/> 
     <input type="text" name="surname" id="un2" value="Surname" /> 
     <input type="text" name="username" id="un3" value="Email Address"/> 
     <input type="button" value="Register!" /> 
    </form> 
</div> 

내 자바 스크립트 코드 (방해) :

window.onload = function(){ 
    //Field Manoeuvre1 
     document.getElementById("un1").onclick = fieldClear1; 
     document.getElementById("un1").onfocus = fieldClear1; 
     document.getElementById("un1").onblur = fieldReplace1; 

    //Field Manoeuvre2 
     document.getElementById("un2").onclick = fieldClear2; 
     document.getElementById("un2").onfocus = fieldClear2; 
     document.getElementById("un2").onblur = fieldReplace2; 

    //Field Manoeuvre3 
     document.getElementById("un3").onclick = fieldClear3; 
     document.getElementById("un3").onfocus = fieldClear3; 
     document.getElementById("un3").onblur = fieldReplace3; 
} 
//Field Manoeuvre1 

function fieldClear1(){ 
if(document.getElementById("un1").value == "First Name"){ 
    document.getElementById("un1").value = ""; 
} 
} 

function fieldReplace1(){ 
if(document.getElementById("un1").value == ""){ 
    document.getElementById("un1").value = "First Name"; 
} 

} 


//Field Manoeuvre2 

function fieldClear2(){ 
if(document.getElementById("un2").value == "Surname"){ 
    document.getElementById("un2").value = ""; 
} 
} 

function fieldReplace2(){ 
if(document.getElementById("un2").value == ""){ 
    document.getElementById("un2").value = "Surname"; 
} 

} 

//Field Manoeuvre3 

function fieldClear3(){ 
if(document.getElementById("un3").value == "Email Address"){ 
    document.getElementById("un3").value = ""; 
} 

function fieldReplace3(){ 
if(document.getElementById("un3").value == ""){ 
    document.getElementById("un3").value = "Email Address"; 
} 

} 

Answer 1

SOLUTION 1

HTML :

<div> 
<form action=""> 
    <input type="text" name="firstname" id="un1" class="myInput" value="First Name"/> 
     <input type="text" name="surname" id="un2" class="myInput" value="Surname" /> 
     <input type="text" name="username" id="un3" class="myInput" value="Email Address"/> 
     <input type="button" value="Register!" /> 
    </form> 
</div> 

JS :

var defaultValues = { 
    un1 : 'First Name', 
    un2 : 'Surname', 
    un3 : 'Email Address' 
} 



var elements = document.querySelectorAll('.myInput'); 
for (var i=0; i<elements.length; i++) { 
    elements[i].addEventListener(['click', 'focus'], function(){ 
    if (this.value === defaultValues[this.id]) this.value = ''; 
    }); 

    elements[i].addEventListener('blur', function(){ 
    if (this.value === '') this.value = defaultValues[this.id]; 
    }); 
} 

PS : 코드가 모든 브라우저와 호환되지 않습니다. 브라우저 호환성을 목표로한다면 차이점을 추상화하는 라이브러리 (예 : jQuery)를 사용해야합니다.

---

해결 방법 2 : HTML 변화 없음

JS :

window.onload = function(){ 
     var field; 

    //Field Manoeuvre1 
     field = document.getElementById('un1'); 
     field.onclick = fieldClear.bind(field, 'First Name'); 
     field.onfocus = fieldClear.bind(field, 'First Name'); 
     field.onblur = fieldReplace.bind(field, 'First Name'); 

    //Field Manoeuvre2 
     field = document.getElementById('un2'); 
     field.onclick = fieldClear.bind(field, 'Surname'); 
     field.onfocus = fieldClear.bind(field, 'Surname'); 
     field.onblur = fieldReplace.bind(field, 'Surname'); 

    //Field Manoeuvre3 
     field = document.getElementById('un3'); 
     field.onclick = fieldClear.bind(field, 'Last Name'); 
     field.onfocus = fieldClear.bind(field, 'Last Name'); 
     field.onblur = fieldReplace.bind(field, 'Last Name'); 
} 

function fieldClear(value){ 
    if(this.value === value) this.value = ''; 
} 

function fieldReplace(value){ 
    if(this.value === '') this.value = value; 
} 

DEMO : 약간의 물건을 단축 할 수 http://jsbin.com/ekoJuQE/1/edit

Answer 2

사용 JQuery와 또는 HTML5 중 하나

의 HTML5 솔루션 :

매개 변수 자리 표시 자을 inpu에 추가하십시오. 이

<input name="firstname" type="text" placeholder="First name" /> 

JQUERY 같은 t (플러스 데이터 플레이스 홀더 속성 = HTML 입력 필드에 "필드에 도시 ​​된 텍스트"

$(window).on("load", function(){ 

    $("#un1, #un2, #un3").on("click, focus", fieldClear(this)); 
    $("#un1, #un2, #un3").on("blur", fieldReplace(this)); 

}); 

function fieldClear(obj) { 
    $(obj).val(''); 
} 

function fieldReplace(obj) { 
    $(obj).val($(obj).data('placeholder')); 
} 

Answer 3

위임 된 이벤트 처리. jQuery를 선택하면 클래스를 추가하거나 요소 유형별로 선택하십시오. 또한 데이터 attr을 추가하십시오.

<input type="text" name="surname" id="un2" value="Surname" data-placeholder="Surname"/> 

$('form').on('click, focus', 'input', function(e){ 
    $(this).val(""); 
}); 

$('form').on('blur', 'input', function(){ 
    $(this).val($(this).attr('data-placeholder')); 
});