this websiteをご覧ください。 2つの検索バーがあり、各検索バーの後に:after
要素があります。その要素をクリックすると、テキストボックスはクリアされます。どうすればJavascriptでこれを行うことができますか? (何jqueryのない)入力をクリアする方法:after要素
0
A
答えて
3
You can't add event listeners to pseudo-elements。しかしここでは、要素には擬似要素以外の内容がないので、イベントリスナーを要素に追加するだけでよいのです。
var input = document.getElementById('input');
document.getElementById('clear').addEventListener('click', function() {
input.value = '';
});
#clear::after {
content: '\00d7';
cursor: pointer;
}
<input id="input" value="Hello" />
<span id="clear" title="Clear"></span>
2
イベントは上で実際にはないクリック:擬似要素の後に、しかし、スパン自体に(あなたがhereを見ることができるように)擬似要素だけでアイコンを提供し、空想は何もありませんここに行く。それでは、このようなことをするだけの問題です。
element.addEventListener('click', function() {
document.getElementById('startInput').value = '';
}, false);
0
私はそれが何か特別だとは思わない。このような 何か:
var elementList = document.getElementsByClassName('something');
for (var i = 0; i < elementList.length; i++) {
elementList[i].addEventListener("click", delFn);
}
function delFn(){
console.log("delete it");
}
関連する問題
- 1. 入力要素
- 2. 二:: after疑似要素
あなたが何かをしようとしたしましたか? – wawawoom
@Oriolと@Nickのように言った。 'event listener'は' element'にあります。擬似要素は '現在の要素'の一部です。要素の後に挿入されるのではなく、現在の要素の境界内で*の内容*の後ろに挿入され、マージンを使ってスタイリングすることができます –