收藏
批改状态：未批改
老师批语：
1.本示例重点使用到onkeydown与onclick事件，event.keyCode键盘硬编码
2.给input输入控件添加onkeydown事件触发增加留言功能，给每个留言列表循环添加删除功能
3.逻辑
1判断用户输入后，是否在键盘按回车
2.创建留言列表，并把内容插入到列表标签(li)中
3.给每个li添加单击删除按钮事件（onclick）
4.获取到列表后，判断输入是否为空，为空则新增，否则在最新的列表添加留言
删除功能使用到confirm弹窗
使用到三元运算符，为true则删除按钮的父节点(li)，否则取消
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简易留言板块(使用到onkeydown事件和onclick单击事件删除功能)2019.05.09</title>
</head>
<body>
<label for="comment">请留言：</label>
<input type="text" id="comment" onkeydown="addComment(this)" autofocus>
<ul id="list"></ul>
<script>
function addComment(comment){
if(event.keyCode === 13){
//1.创建列表，并添加到列表中
var item = document.createElement('li');
item.innerHTML = comment.value;
//给每个li添加删除按钮
item.innerHTML += '<button onclick="del(this)">删除</button>';
var list = document.querySelector('#list');
//2.判断输入是否为空，在最新的位置开始插入
if(list.childElementCount === 0){
list.append(item);
}else{
var first = list.firstElementChild;
list.prepend(item,first);
}
//清空输入框
comment.value = '';
}
}
//删除
/* function del(ele){
if(confirm('是否删除')){
//获取按钮的父元素 li
var li = ele.parentNode;
li.parentNode.removeChild(li);
}
}*/
function del(ele){
return confirm('是否删除') ? ele.parentElement.remove() : false;
}
</script>
</body>
</html>
运行实例 »点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
