[英]Jquery to Pure Vanilla JS
I'd like to convert this small script
to a pure vanilla JS
. 我想将这个小
script
转换为纯vanilla JS
。
$('input, textarea').focus(function() {
$(this).data('placeholder', $(this).attr('placeholder')).attr('placeholder', '');
}).blur(function() {
$(this).attr('placeholder', $(this).data('placeholder'));
});
Thanks to Treast, I'm here at this point... Almost working good: 感谢Treast,我现在在这里...几乎可以正常工作:
var elements = document.querySelectorAll('input, textarea');
for(var i = 0; i < elements.length; i++) {
var element = elements[i];
element.addEventListener('focus', function() {
element.setAttribute('data-placeholder', element.getAttribute('placeholder'));
element.setAttribute('placeholder', '');
}),
element.addEventListener('blur', function() {
element.setAttribute('placeholder', element.getAttribute('data-placeholder'));
element.setAttribute('data-placeholder', '');
});
}
Any idea please? 有什么想法吗?
$('input, textarea')
will select ALL input or textarea. $('input, textarea')
将选择ALL输入或textarea。 With Vanilla, you cannot add an EventListener
on a list of elements, so you need to loop through all elements. 使用Vanilla,您无法在元素列表上添加
EventListener
,因此需要遍历所有元素。 And you need to use querySelectorAll
to get the same list. 并且您需要使用
querySelectorAll
来获得相同的列表。 Also, you cannot chain addEventListener
. 同样,您不能链接
addEventListener
。
So your code will be: 因此,您的代码将是:
var elements = document.querySelectorAll('input, textarea'); var elements = document.querySelectorAll('input,textarea');
for(var i = 0; i < elements.length; i++) {
var element = elements[i];
element.addEventListener('focus', function() {
this.setAttribute('data-placeholder', this.getAttribute('placeholder'));
this.setAttribute('placeholder', '');
});
element.addEventListener('blur', function() {
this.setAttribute('placeholder', this.getAttribute('data-placeholder'));
this.setAttribute('data-placeholder', '');
});
}
Have a good look at Patrick's comment above about if this is even needed. 仔细看一下Patrick的评论 (甚至需要这样做)。
-- -
As for converting your code to vanilla JS, I think the only issue with your Demo 2 is an unclosed Button tag. 至于将代码转换为原始JS,我认为Demo 2的唯一问题是未封闭的Button标记。 I'd suggest splitting things up to help readability.
我建议分解内容以提高可读性。 Have a look: https://jsfiddle.net/Lebxdrwk/2/
看看: https : //jsfiddle.net/Lebxdrwk/2/
const onFocus = event => {
const element = event.target;
const placeholder = element.getAttribute('placeholder');
element.setAttribute('data-placeholder', placeholder);
element.setAttribute('placeholder', '');
};
const onBlur = event => {
const element = event.target;
const dataPlaceholder = element.getAttribute('data-placeholder');
element.setAttribute('placeholder', dataPlaceholder);
element.setAttribute('data-placeholder', '');
}
const addEventListenersToSwapPlaceholders = element => {
element.addEventListener('focus', onFocus);
element.addEventListener('blur', onBlur);
}
document.querySelectorAll('input, textarea')
.forEach(addEventListenersToSwapPlaceholders);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.