mpvue 键盘搜索

青旅半醒 2021-07-24 17:40 392阅读 0赞

pc无法模拟键盘以及键盘上点击确认按钮,通过点击后回车来模拟
    
    1、input的type必须是'text'类型
    
    2、设置键盘出来后的右下角按钮名称
    	标签上添加confirm-type='xx'
    
    3、监听该按钮事件
    	标签上添加@confirm='回调'
    	回调中可以有event参数,将包含当前input的信息

代码示例:

<template>
      <div>
        <div class="search">
          <input v-model='value' @confirm='search' confirm-type='搜索' type="text" placeholder="jeff妙妙屋" placeholder-class="inp">
           <span class='clear' v-show='value' @click='clears'>X</span>
        </div>
      </div>
    </template>
    
    <script>
      export default{ 
        data()
        { 
          return{ 
            value:'',
            arr:[]
          }
        },
        methods:{ 
          clears()
          { 
            this.value='';
          },
          search(e)
          { 
            wx.request({ 
              url:'http://localhost:3000/search',
              data:{ id:2},
              success:(res)=>{ 
                this.arr=res.data;
                console.log(this.arr);
              }
            })
          }
        }
      }
    </script>
    
    <style>
      .search{ 
        width: 80%;
        height: 80rpx;
        margin: 10rpx auto;
        border-bottom: solid 2px #02A774;
        position: relative;
      }
      .search>input{ 
        height: 100%;
        width: 100%;
      }
      .inp{ 
        color:#02A774;
      }
      .clear{ 
        position: absolute;
        right:20rpx;
        top:20rpx;
        color:#02A774;
        z-index: 2;
      }
    
    </style>

发表评论取消回复

表情：

评论列表（有 0 条评论，392人围观）

还没有评论，来说两句吧...

相关阅读

相关 android键盘按钮搜索,android软键盘的搜索按钮

et\_key.setOnEditorActionListener(newTextView.OnEditorActionListener() \{ @Override pu

柔情只为你懂/ 2022年10月17日 10:57/ 0 赞/ 189 阅读

相关 JavaScript获取键盘代码（实例搜索跳转）

.Net做的网站有些时候跟页面的js跳转有冲突。回发的时候会出现内容不载入的情况（判断了是否第一次打开页面）。这个时候我选择了将页面控件的键盘时间屏蔽（仅有Enter键）；

比眉伴天荒/ 2022年09月19日 08:05/ 0 赞/ 121 阅读

相关 Android 搜索把软键盘上的回车键改为搜索

需求为：当用户在发现界面内点击搜索按钮，弹出键盘，键盘右下角示意为“搜索”按钮，当用户输入内容后，点击搜索按钮将进行关键词搜索，当用户没有输入内容点击搜索按钮，将收

太过爱你忘了你带给我的痛/ 2022年07月18日 04:12/ 0 赞/ 208 阅读

相关【mpvue】如何升级mpvue版本

1、查看当前mpvue版本打开小程序项目，在package.json文件中可以看到mpvue当前的版本，可以看出我当前mpvue的版本是"^2.0.0"，意思是安装mp

向右看齐/ 2022年02月18日 12:31/ 0 赞/ 253 阅读

相关微信小程序使用键盘搜索功能

记录下。 1、name=‘search’;//search内容随便写 2、bindconfirm='shop_search_function'；//这个变量是

柔情只为你懂/ 2021年12月15日 16:29/ 0 赞/ 427 阅读

相关 mpvue - mpvue-router-patch配置路由

前言 `mpvue-router-patch`是mpvue 中使用 `vue-router`兼容的路由使用 // 在src/main.js

喜欢ヅ旅行/ 2021年09月20日 01:42/ 0 赞/ 332 阅读

相关 mpvue - mpvue使用iView Weapp组件库

前言 iView weapp 是iview针对微信小程序开发组件库。 iView Weapp 地址：[https://weapp.iviewui.com/

川长思鸟来/ 2021年09月19日 18:44/ 0 赞/ 423 阅读

相关 vue 移动端键盘搜索事件监听

1、首先注意，input的type="search" <input @keypress="searchGoods" type="search" placeholder="

缺乏、安全感/ 2021年09月19日 15:16/ 0 赞/ 457 阅读

相关 uniapp 搜索框点击搜索时键盘不收回解决办法

uniapp 搜索框点击搜索键盘不收回 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aH

缺乏、安全感/ 2021年07月25日 12:13/ 0 赞/ 932 阅读

相关 mpvue 键盘搜索

pc无法模拟键盘以及键盘上点击确认按钮,通过点击后回车来模拟 1、input的type必须是'text'类型 2、设置键盘出来后的右

青旅半醒/ 2021年07月24日 17:40/ 0 赞/ 392 阅读