的onblur和聚焦状态的输入字段不能编辑

Question

我有一个输入字段是这样的：

<input class="" type="text" id="Name_11_1" name="Name" value="Your name:"> 

并希望将它变成这样：

<input class="" type="text" id="Name_11_1" name="Name" value="Your name:" onblur="this.value = this.value || this.defaultValue;" onfocus="this.value == this.defaultValue && (this.value = '');"Your name:"> 

的问题是，我不能直接编辑输入字段，必须使用外部JavaScript代码，但我的js级别是inder新手，所以每个帮助将不胜感激

Answer 1

首先删除现有的事件处理程序，然后附上自己：

var obj = document.getElementById('Name_11_1'); 

obj.removeAttribute('onfocus'); 
obj.removeAttribute('onblur'); 

obj.addEventListener('blur', function() { 
    // your js code for blur event 
}); 
obj.addEventListener('focus', function() { 
    // your js code for focus event 
}); 

Answer 2

使用jQuery：

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
    <script> 
     $(function() { 
      $('#Name_11_1').blur(function() { 
       $(this).val(YOUR_EXPR); 
      }); 

      $('#Name_11_1').focus(function() { 
       $(this).val(YOUR_EXPR); 
      }); 
     }); 
    </script> 

Answer 3

如果浏览器理解上input标签placeholder属性，你可以使用：

<input id="foo" name="foo" placeholder="Your name"> 

你可以然后添加JavaScript以提供其他浏览器的回退：

if (!'placeholder' in document.createElement('input')) { 
    $('#foo').on('focus', function() { 
     // your code 
    }).on('blur', function() { 
     // your code 
    }); 
} 

UPDATE：忘记OP不能直接编辑0​​标签。在这种情况下，代码片段可以被修改，以这样的事：

var elem = $('#Name_11_1'), 
    defaultValue = 'Your name'; 

if ('placeholder' in document.createElement('input')) { 
    elem.attr('placeholder', defaultValue); 
} else { 
    elem.on('focus', function() { 
     // your code 
    }).on('blur', function() { 
     // your code 
    }); 
}