前言:
搜索框是个常见的功能,除了 用ui库,有的时候必须要自己封装(因为改ui库太麻烦了,定制化要求很高),所以 涉及到 点击按钮搜索和回车搜索都要实现。下面就是实现的一些方法。
实现方法:
html里:
方式一:html里可以用 form 来实现,因为form里回车也能触发提交事件。思路就是 form里 包裹 input,和一个button ,button的type要设置成 submit(必须设置)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>搜索框</title>
</head>
<body>
<form action="">
<input type="text" name="" id="val">
<button type="submit" id="sub">搜搜</button>
</form>
</body>
<script>
let submit=document.getElementById("sub");
let val=document.getElementById("val");
submit.addEventListener("click",()=>{
alert("值是"+val.value)
});
</script>
</html>
方式二:
采用原生的方法 利用 keyup判断 键盘码keyCode==13。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>搜索框</title>
</head>
<body>
<input type="text" name="" id="val">
<button id="sub">搜搜</button>
</body>
<script>
let submit = document.getElementById("sub");
let val = document.getElementById("val");
val.onkeyup = function (event) {
var e = event || window.event;
if (e && e.keyCode == 13) { //回车键的键值为13
alert("值是" + val.value);
}
};
submit.onclick = function () {
alert("值是" + val.value);
}
</script>
</html>
vue里:
vue里其实还是很简单的 因为 他有 按键修饰符 @keyup.enter.native="seachEnter" 所有不做赘述。
当然 html 里的两个方法同样适用。只需要 改变 一点写法 。切记用方式 二时要在组件销毁时移除 监听事件。文章来源:https://www.toymoban.com/news/detail-670668.html
react里:
当然 html 里的两个方法同样适用。只需要 改变 一点写法 。切记用方式 二时要在组件销毁时移除 监听事件。
总结:
综上vue里可以直接用按键修饰符,react、html里推荐用 form, 就算用 keycode也要记得 在组件销毁时移除 keyup事件。文章来源地址https://www.toymoban.com/news/detail-670668.html
到了这里,关于前端实现 input 回车搜索(html,vue,react实现)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!