前端实现 input 回车搜索(html,vue,react实现)

这篇具有很好参考价值的文章主要介绍了前端实现 input 回车搜索(html,vue,react实现)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言:

搜索框是个常见的功能,除了 用ui库,有的时候必须要自己封装(因为改ui库太麻烦了,定制化要求很高),所以 涉及到 点击按钮搜索和回车搜索都要实现。下面就是实现的一些方法。

input 回车搜索,React,html,Vue,前端,vue.js,react.js,html

实现方法:

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 里的两个方法同样适用。只需要 改变 一点写法 。切记用方式 二时要在组件销毁时移除 监听事件。

react里:

当然 html 里的两个方法同样适用。只需要 改变 一点写法 。切记用方式 二时要在组件销毁时移除 监听事件。

总结:

综上vue里可以直接用按键修饰符,react、html里推荐用 form, 就算用 keycode也要记得 在组件销毁时移除 keyup事件。文章来源地址https://www.toymoban.com/news/detail-670668.html

到了这里,关于前端实现 input 回车搜索(html,vue,react实现)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端js react vue怎么实现在线预览doc文档

    先说结论: 目前在纯前端层面没有很好的方案,基本都需要服务端的介入。 优点 :简单易用,无需配置 缺点 :文档需要支持外网访问,且文档会是公开可见的,所以对于一些内部敏感的文档来说,这个显然是不可行的。 需要后端介入配合 onlyoffice地址 这个也要先在服务器

    2024年02月15日
    浏览(85)
  • 前端实现简单的sse封装(React hook Vue3)

    所谓的SSE(Sever-Sent Event),就是浏览器向服务器发送了一个HTTP请求,保持长连接,服务器不断单向地向浏览器推送“信息”,这么做是为了节省网络资源,不用一直发请求,建立新连接。 优点:SSE和WebSocket相比,最大的优势是便利,服务端不需要第三方组件,开发难度低,SSE和

    2024年02月09日
    浏览(46)
  • taro react/vue h5 中的上传input onchange 值得区别

    1、taro3+react 2、taro3+vue3

    2024年02月11日
    浏览(36)
  • input , change ,blur 事件的区别,以及在vue和react中的表现

    onInput Event 当一个 , , 或 元素的 value 被修改时,会触发 input 事件 onChange Event 当用户更改 、 和 元素的值时,change 事件在这些元素上触发。和 input 事件不同的是,并不是每次元素的 value 改变时都会触发 change 事件。 基于表单元素的类型和用户对元素的操作的不同,change 事件

    2024年02月04日
    浏览(37)
  • 三大前端技术(React,Vue,Angular)

    React(也被称为React.js或ReactJS)是一个用于构建用户界面的JavaScript库。它由Facebook和一个由个人开发者和公司组成的社区来维护。 React可以作为开发单页或移动应用的基础。然而,React只关注向DOM渲染数据,因此创建React应用通常需要使用额外的库来进行状态管理和路由,Red

    2024年02月09日
    浏览(54)
  • Vue 和 React 前端框架的比较

    本文研究了流行的前端框架 Vue 和 React 之间的区别。通过对它们的学习曲线、视图层处理方式、组件化开发、响应式数据处理方式和生态系统及社区支持进行比较分析,得出了它们在不同方面的优劣和特点。该研究对于开发者在选择合适的前端框架时提供参考。 Vue 是一款由

    2024年02月13日
    浏览(64)
  • React与Vue:前端框架的比较

    在前端开发领域,React和Vue是两个备受瞩目的框架。它们都提供了构建用户界面的强大工具,但它们在实现方式、性能和设计理念上存在一些关键差异。本文将深入探讨这两个框架之间的主要区别。 首先,让我们从数据流的角度来看。在Vue中,数据流是双向的,这意味着组件

    2024年01月20日
    浏览(49)
  • react、Vue打包直接运行index.html不空白方法

    在根目录下创建 vue.config.js 文件,写入

    2024年01月21日
    浏览(40)
  • react+vue 前端国密算法sm2、sm3 、sm4的js ts实现

    1. 简单介绍下SM2 和 SM3 SM2 算法:是一种公钥加密算法,它的密钥长度为 256 位,安全性较高。可用于数字签名、密钥协商等场景。 SM3 算法:是一种对称加密算法,用于消息摘要和数字签名等场景。它的密钥长度为 256 位,安全性较高。SM3 算法与 SM2 算法相互配合,提高了整体

    2024年01月19日
    浏览(41)
  • vue在input中输入后,按回车,提交数据

    1.展示效果如下: 2.代码展示: 在return data: 在methods: 在进行数据回车后可将此值push进遍历的数据中,及时查看,不必刷新,如果后台的id 是随机生成的,而不是前端提交过去的,那对此数据进行删除与编辑时,需要重新请求一遍 后台的数据,获取真实的数据库中的数据

    2024年02月15日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包