Javascript OnFocus 和 OnBlur 事件

Question

我想在 Javascript 中创建 onfocus 和 onBlur 事件。我找到了 jQuery 中的解决方案，但不确定如何将其转换为 Javascript.

<textarea id='postitTextArea'  ></textarea>
$('input,textarea').focus(function()
{
  $(this).data('placeholder', $(this).attr('placeholder'))
        .attr('placeholder', '');
}).blur(function()
{
  $(this).attr('placeholder', $(this).data('placeholder'));
});

以上代码运行良好。任何帮助将不胜感激。

Answer 1

var inputs, index;

inputs = document.getElementsByTagName('input');
for (index = 0; index < inputs.length; ++index) {
    inputs[index].onfocus = function(){
     // Your script
    };
    inputs[index].onblur = function(){
     // Your script
    };
}

//similarly for textarea

Answer 2

这样试试：

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

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

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

Answer 3

这是您提供的 jQuery 代码的 JavaScript 代码，

HTML:

<textarea id='postitTextArea' placeholder="placeholder text" onfocus="focusAction()" onblur="blurAction()"></textarea>

JS:

function focusAction(){
    var target = document.getElementById('postitTextArea');
    var setAttrVal = target.setAttribute('placeholder',' ');
    console.log('placeholder: ' + setAttrVal);
}
function blurAction(){
    var target = document.getElementById('postitTextArea');
    var setAttrVal = target.setAttribute('placeholder','placeholder text');
    console.log('placeholder: ' + setAttrVal);
}

Javascript OnFocus 和 OnBlur 事件

Javascript OnFocus and OnBlue events

javascript

jquery

dom-events

onblur

onfocus