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级别是新手，所以每个帮助都将非常感激

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

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

3 个答案: