javascript - 无法编辑的输入字段中的 Onblur 和 Onfocus

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

使用 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 2

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

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 3

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

<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
    });
}

更新：忘记了 OP 不能input直接编辑标签。在这种情况下，代码片段可以修改为如下内容：

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
    });
}