Question

有没有办法简化下面的javascript代码？

它有效，但我确信必须有办法减少显然我的基本javascript技能，当然，我正在努力提高我的理解。

我的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>

我的Javascript代码（不引人注目）：

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

解决方案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解决方案：

将参数占位符添加到此输入

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

Jquery（加上属性data-placeholder =＆＃34;文字显示在字段＆＃34; 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'));
});

Javascript简化 - Onclick，Onblur，Onfocus - Forms

3 个答案: