javascript - 遮罩层获取,触发事件后,如何触发它下面的元素的事件?

Question

如图这是一个表单的输入框,它的html如下:&lt;li&gt; {代码...} &lt;/li&gt;li中的p标签为一个遮罩层(点击输入框/输入框Onfocus时隐藏,并使输入框为获取焦点状态),获取焦点时如图: 现在问题来了:因为p标签是定位在...

PHP中文网 · Answer

厉害了word哥，你们老板真是个奇葩...非要另外写

var doc = document,
    u_name = doc.querySelector('#u_name'),
    v_menu = doc.querySelector('.v_menu');

    v_menu.addEventListener('click',function(){
        this.style.display = 'none';
        u_name.focus();
    });
    u_name.addEventListener('blur',function(){
        v_menu.style.display = 'block';
    })

你的那个问题

v_menu.addEventListener('click', function() {
    var ele = this.parentNode; //this指向正常
    console.log(ele)
    var elem = ele.getElementsByTagName("input"); //elem正常
    console.log(elem)//这返回的是一个类数组集合
    console.log(elem[0])//这才是你要操作的元素
    this.style.display = 'none';
    // elem.focus(); //就是报错
    elem[0].focus(); //这个就正常了
    // u_name.focus();
});

天蓬老师 · Answer

用事件委托.

详情见: https://segmentfault.com/a/11...

巴扎黑 · Answer

这种文本框的占位提示为什么不直接使用placeholder？

其次，这种的话，如果非要使用元素来模拟的话，使用jQuery之类的就比较好写了

//jQuery的写法
$('.v_menu').on('click',function(){
    //点击这个元素的时候隐藏自己并让前面的一个元素获取焦点
    $(this).hide().prev().focus();
})

$('.w_txt').on('focus',function(){
    //当Tab键直接让input获取到焦点时让占位遮罩消失
    $(this).next().hide();
}).on('blur',function(){
    //失去焦点并且没有内容时显示出来
    if(!this.value){
        $(this).next().show();
    }
})

上面的写法请保证所有的遮罩文字元素都在 input元素之后，并且都有相同的class

大家讲道理 · Answer

答案，楼上都已经说了，我只想再重复一句，你们BOXX真是奇葩中的奇葩。

伊谢尔伦 · Answer

估计老板不懂技术，哈哈