1. 程式人生 > >vue點選input彈出帶搜尋鍵盤並監聽該元素

vue點選input彈出帶搜尋鍵盤並監聽該元素

1.遇到問題:

    需要做一個點選input彈出帶搜尋的鍵盤。

  解決:

     input的type="search",可彈出帶搜尋的鍵盤。並監聽搜尋按鈕,請求資料

<input @keyup.13="show()" type="search">

2.但是又遇到一個新的問題:

     點選搜尋之後鍵盤沒有收回。

    解決:

    通過$refs獲取input

    監聽搜尋按鈕,新增.blur()

<input @keyup.13=show() type="search" ref="input1">
show(){
  this.$refs.input1.blur();
}

3.測試時發現ios無法彈出帶搜尋的鍵盤

    解決:

    給input外加一層from

<form action="javascript:return true;">
  <input @keyup.13=show() type="search" ref="input1">
</form>
show(){
  this.$refs.input1.blur();
}

相關推薦

vueinput搜尋鍵盤元素

1.遇到問題:    需要做一個點選input彈出帶搜尋的鍵盤。  解決:     input的type="search",可彈出帶搜尋的鍵盤。並監聽搜尋按鈕,請求資料<input @keyup.13="show()" type="search">2.但是又遇到一

移動端去掉input的系統鍵盤

<div class="calendar"> <div> <input type="text" id="cc1" class=""

Vue2.x-01按鈕Vue元件,遍歷JSON展示資料

文章目錄 概述 實現過程 Step1: 父元件設定Button按鈕 Step2: 這裡使用了showHandlerFlag來控制子元件是否顯示,所裡需要在data中定義下這個變數 Step3: 引用宣告元件 Step4:

按鈕表單對話方塊透明遮罩

使用模態對話方塊來請求使用者在一個多步驟過程中輸入資料。在內容區域嵌入 form 標記,設定 modal 選項為 true,並通過 buttons 選項來指定主要的和次要的使用者動作 1. 按鈕 <input class="primary-btn" type="b

CMFCToolBar::ReplaceButton() 替換CMFCToolBarMenuButton控制元件 按鈕選單問題

    最近使用MFC單文件做了一個專案,需要用到CMFCToolBar由於自己的按鈕是在太多了,所有又把相同的按鈕歸類也就是把相同的按鈕放在一個按鈕下,在點選這個按鈕的時候彈出合併的所有選項 問題1:在我點選有下拉項的按鈕右側(三角符號部分)時才會彈出

連結一個DIV層視窗

做裝置介紹頁面的時候,發現每個裝置點選檢視詳情都需要連結一個新的頁面,這樣比較影響網頁瀏覽的效率和舒適度,所以想用彈窗的形式在當前頁面展示詳情。彈出的視窗要固定在瀏覽器視窗的中間位置,我採用了fixed固定佈局。 <!--HTML--> <body style="backg

按鈕類似IOS 底部 dialog

implementation 'com.baoyz.actionsheet:library:1.1.7' 然後設定按鈕點選監聽,,呼叫下列程式碼即可 ActionSheet.createBuilder(this, getSupportFragmentManager())

Android Studio ListView的item事件AlertDialog,和item的滑動

首先看看效果圖: 點選彈出AlertDialog的確認框! (一)第一步,建立一個xml檔案顯示item的佈局 student_item.xml <?xml version="1.0" encoding="utf-8"?> <LinearLa

android開發入門 按鈕對話方塊

1、在layout中新增按鈕 2、在MainActivity中新增以下函式 public void showDialog(View view){ AlertDialog.Builder builder=new AlertDialog.Builder(this);

按鈕模態框實現

點選按鈕彈出模態框的實現: html: <!DOCTYPE html> <html> <head> <meta charset="utf-8">

webview長按實現選單欄

最近有一個需求,當長按點選webview,彈出選單欄,這是系統預設的有複製,全選,搜尋等功能,而不能滿足公司需求,同時公司需要將分享和搜尋功能去掉,新增自己的選單: 新增自己的功能,自定義webview,複寫下邊兩個方法: @Override public ActionMo

Android定位&地圖&導航——基於百度地圖,實現自定義圖示繪製泡泡

public class MainActivity extends Activity { private EditText txtAddr; // 定位相關 LocationClient mLocClient; LocationData locData = nul

【Unity 3D 5.6版本使用(3)】物體視窗顯示狀態

emmm直接看程式碼 using System.Collections; using System.Collections.Generic; using UnityEngine; public class ShowWindow : MonoBehavio

2.1使用canvas畫個圓,每次畫布提示框

<body><canvas id="canvas" width="500" height="500" style="border:dashed 1px"></canvas></body><script>var can

EditText事件——

目標 點選Faculty彈出院系單選對話方塊,將選擇的內容顯示在EditText中 Faculty是一個Edittext控制元件。 1,設定EditText屬性 使用以下兩句設定

Android中防止Toast一直一直

在使用工作中經常使用Toast,如果使用者連續點選很多下按鈕,可能Toast顯示一兩分鐘也不會消失,這就給我們的使用者造成了困擾。以下是解決辦法: private int num = 0;//連續點選的次數 private static Toast toa

jQuery圖片放大特效下載

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>美女圖片瀏覽特效 - 何

python PyQt5 實現按鈕一個視窗

嘛,我今天就送一下福利吧 請注意:您在下載之前,請確認你下載的是python_UI.rar 1. 實現功能 首介面 點選進入系統後彈出介面 點選程式碼查重後彈出介面

Java如何實現按鈕儲存檔案的選項

Swing中用JFileChooser選擇路徑儲存檔案 String ss = this.mailEditor.getText(); JFileChooser jfc = new javax.swing.JFileChooser(); if(JF

Android百度地圖3.0.0Marker覆蓋物

最近在學習百度地圖,發現百度地圖更新後,好多東西都改變了,ItemizedOverlay<OverlayItem>這個類更是找不到了。於是自己查了下最新的文件,發現彈窗效果百度提供InfoWindow來實現。 InfoWindow(v, LatLng, list