問題を確認するには、ページにアクセスしてくださいhttps://ibnul.neocities.org/_temporary/index10-prb2.html
ここに入力フィールドがあります。クリックすると、いくつかのリスト項目を含むドロップダウンリストが表示されます。ユーザーがリストからアイテムをクリックすると、入力フィールドに表示されます。また、ユーザーがリストから別のアイテムをクリックすると、入力フィールドに表示され、前のアイテムが上書きされます。オプションタグの選択動作とほとんど同じです。
つまり、ユーザーがクリックしたアイテムのテキスト値が入力フィールドに表示され、リストが消えます。
このスクリプトの書き方を教えてもらえますか？純粋なJavaScriptで表示してください。
var zip_list_show_Btn = document.querySelector('.ziplist-show-btn');
var zip_list_con = document.querySelector('.zip-list-con');
zip_list_show_Btn.addEventListener('focus', showZiplistCon);
function showZiplistCon() {
zip_list_con.classList.add('show-zip-list-con');
}
window.addEventListener("click", function(event) {
if (!event.target.matches('.ziplist-show-btn')) {
var langDropdowns = document.getElementsByClassName('zip-list-con');
for (var i = 0; i < langDropdowns.length; i++) {
var openlangDropdown = langDropdowns[i];
if (openlangDropdown.classList.contains('show-zip-list-con')) {
openlangDropdown.classList.remove('show-zip-list-con');
}
}
}
});* {
margin: 0px;
}
body {
padding: 50px;
display: flex;
justify-content: center;
}
.zip-input {
width: 100px;
padding: 10px 5px 10px 5px;
margin: 5px 10px 5px 10px;
font-size: 14px;
border: 1px solid rgb(179, 179, 179);
color: rgb(172, 172, 172);
-webkit-appearance: none;
}
.zip-input::placeholder {
color: #acacac;
opacity: 1;
}
.zip-input-ziplist-con {
position: relative;
display: flex;
}
.zip-list-con {
flex-grow: 2;
position: absolute;
z-index: 1;
top: 53px;
right: 0px;
width: 160px;
height: 200px;
overflow-x: hidden;
overflow-y: scroll;
background-color: white;
border: 0.9px solid lightgray;
display: none;
}
.zip-listitem {
cursor: default;
padding: 5px 5px 5px 10px;
font-size: 14px;
color: #acacac;
}
.zip-listitem:hover {
background-color: #228de4;
color: white;
}
.show-zip-list-con {
display: block;
}<div class='zip-input-ziplist-con'>
<input class='zip-input radi-show-btn ziplist-show-btn' type='text' placeholder='Zip/City'>
<div class='zip-list-con'>
<p class='zip-listitem'>43748 NewYork</p>
<p class='zip-listitem'>43748 Italy</p>
<p class='zip-listitem'>43748 French</p>
<p class='zip-listitem'>43748 Australia</p>
<p class='zip-listitem'>43748 something</p>
<p class='zip-listitem'>43748 something</p>
<p class='zip-listitem'>43748 something</p>
<p class='zip-listitem'>43748 something</p>
<p class='zip-listitem'>43748 something</p>
</div>
</div>コードの記述方法に従って、クリックされたテキストを取得し、その値を入力要素に配置することが目標です。したがって、このブロックをeventListenerコールバック関数に追加するだけです。
if (event.target.matches('.zip-listitem')) {
var selectedText = event.target.textContent;
document.getElementsByClassName("zip-input")[0].value = selectedText;
}
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加