老师,能帮忙回答一下这个问题吗?

老师,能帮忙回答一下这个问题吗?

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>text</title>
</head>
<body>
<div tabindex="1">
<input id="text" type="text" />
<ul style="display: none;">
<li>编号0001</li>
</ul>
</div>
<script>
let text = document.getElementById('text'); // 获取文本框
let oul = document.getElementsByTagName('ul')[0]; // 获取ul标签
let oli = oul.getElementsByTagName('li'); // 获取li标签
// 文本框获得焦点的时候ul列表显示
text.addEventListener("focusin", () => {
oul.style.display = 'block';
})
// 文本框失去焦点的时候ul列表隐藏
text.addEventListener("focusout", () => {
oul.style.display = 'none';
})
// 现在我用的方法是setTimeout
// text.onblur = function() {
//   setTimeout(() => {
//     console.log(1)
//     oul.style.display = 'none';
//   }, 100)
// }
// 为每一个li标签添加点击事件:将li标签里面的内容存储在文本框里
for (let i = 0; i < oli.length; i++) {
oli[i].onclick = function() {
text.value = this.innerHTML;
}
}
</script>
</body>
</html>

老师,帮忙回答一下这个问题,如果不用延时器,如何解决,点击选项选不到值的问题,万分感谢。

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

2回答
好帮手慕星星 2019-06-09 15:01:45

你好,其实也是可以实现的,不过要都要换成点击事件,阻止冒泡,参考:

http://img1.sycdn.imooc.com//climg/5cfcae860001d73a08220461.jpg

点击输入框的时候,显示列表,阻止冒泡,事件传递。

将点击事件绑定在页面上,点击页面的时候将列表隐藏。

点击列表项的时候添加内容,将列表隐藏。

自己可以试一下,祝学习愉快!

好帮手慕糖 2019-06-07 11:40:39

同学你好,建议:可以详细的描述下想要实现的效果,或者指出是课程中那一块的内容,便于准确的定位与解决问题。

祝学习愉快!

  • 提问者 目訫 #1
    文本框获得焦点,下拉选框显示,文本框失去焦点,下拉选框隐藏,点击下拉选框里面的选项,给上面的文本框赋值,下拉框消失,
    2019-06-07 11:46:30
  • 好帮手慕糖 回复 提问者 目訫 #2
    你好,这个思路是冲突的哦,因为失去焦点就隐藏了,无法获取下面的内容了哦。祝学习愉快!
    2019-06-07 19:01:05
  • 提问者 目訫 回复 好帮手慕糖 #3
    可是我想达成datalist的效果,老师有什么办法吗,谢谢老师,感谢。
    2019-06-07 19:02:43
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
组件化思想开发电商网页 18版
  • 参与学习           人
  • 提交作业       467    份
  • 解答问题       4826    个

本路径带你通过系统学习HTML5、JavaScript、jQuery的进阶知识,不仅如此,还会学习如何利用组件化的思想来开发网页,知识点+案例,使得所学可以更好的得到实践。

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师