1. 程式人生 > >【手機UI】搜尋輸入框,撥出軟鍵盤時右下角為搜尋按鈕,並使用js傳送請求

【手機UI】搜尋輸入框,撥出軟鍵盤時右下角為搜尋按鈕,並使用js傳送請求

<!DOCTYPE html>
<html>
<head>
<title>搜尋</title>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
</head>

<body>
	<form action="" method="get" id="J_search_artical" enctype='application/json'>
		<input type="search" id="J_search_content" placeholder="搜尋" />
	</form>
</body>
<script>
window.onload = function(){
	document.getElementById("J_search_artical").onsubmit = function () {
		var title = document.getElementById("J_search_content").value;
		alert('title:'+ title);
		document.getElementById("J_search_content").blur()
		// do search
		return false;
		
	};
}
</script>
</html>

1 使用form表單

2 form表單action填空,使用js傳送請求

3 form上增加enctype='applicaion/json'

4 點選搜尋按鈕的時候,會觸發onsubmit事件

5 新增return false,遮蔽form表單會自動觸發提交重新整理頁面的事件

相關推薦

手機UI搜尋輸入鍵盤右下搜尋按鈕使用js傳送請求

<!DOCTYPE html> <html> <head> <title>搜尋</title> <meta http-equiv="C

搜尋輸入鍵盤右下搜尋按鈕

1.使用form表單 <form> <div class="mui-input-row mui-search" style="position: absolute;"> <input id="searchSN" type="search" class=

解決點選edittext鍵盤佈局往上頂的問題

在activity的清單檔案中加入 android:windowSoftInputMode="stateAlwaysHidden|adjustPan" android:configChanges="keyboardHidden|o

Android EditText彈鍵盤實現頁面標題頭不動鍵盤在編輯下面

為了實現EditText編輯的時候彈出軟鍵盤標題頭不動,底部編輯框上移,想了好多種方法,也百度,問同事每種辦法都有問題,在這總結一下,希望能幫助到大家。 上圖看下效果: 可以看到彈出鍵盤的時候,只有EditText在軟鍵盤上面,還有一個藍色點,這個隨後再說。 用Relative

Android開發之使一開啟activity等介面Edittext獲取焦點鍵盤java程式碼實現

// 獲取編輯框焦點 editText.setFocusable(true); //開啟軟鍵盤 IInputMethodManager imm = (InputMethodManager)getSystemService(Context.INPUT_METHOD_SERVI

常用查詢輸入:一個關鍵字繫結多個屬性(包括int、string不同的型別)

從input獲取輸入一個待查詢關鍵字key,前端不區分,傳到後臺再進行處理,基本邏輯如下: //根據訂單號(int)或者供應商名稱(string)查詢訂單 if (!string.IsNullOrEmpty(key)) { var Id = MathTools.ToInt(key);

Unity3D / UIUGUI Text 文字調整字間距適配對齊方式

問題描述 最近的專案美術提需求要調整遊戲得分顯示的數字間隔,發現UGUI的Text元件只提供了行間距的調整,而無法調整字與字之間的間隔,搜尋之後發現一篇博文 UGUI之修改Text字間距 ,按文中提供的程式碼,可以實現文字字間距調整,但是隻支援左對齊方式,居中對

Android自定義控制元件選擇輸入的實現

1.場景 Android開發中經常會用到選擇輸入控制元件,比如性別的輸入 2.示例圖片 3.程式碼組成 1)演示用的主介面佈局不多說,這裡採用EditText + 一個自定義的底部列表對話方塊來實現的 2)佈局檔案 <?xml

Android自定義控制元件密碼輸入+數字鍵盤的實現

因專案需要,實現了一個自定義的密輸入框和自定義數字鍵盤,用作使用者支付密碼設定介面。先上效果圖如下,方格樣式,以及點選空白處隱藏軟鍵盤。 控制元件實現清單: 1)集成於EditText的輸入框控制元件:PasswordInputView.java 2)

微信小程式input輸入的的使用

1、獲取input輸入的值 在input里加觸發事件 <input placeholder="輸入查詢" bindinput="user_input_search" auto-focus/>在JS裡面再寫觸發事件的內容 user_input_se

jQuery UI -(1)-Effects

blog 2.4 jquery ui borde ati div head jquery rip 【.hide()】 .hide( effect [, options ] [, duration ] [, complete ] ) <!doct

android仿微信、QQ等聊天介面實現點選輸入鍵盤、點選其他區域收起鍵盤預設滑動至最低端

如圖所示,點選輸入框及選擇圖片和傳送按鈕時軟鍵盤顯示且不消失,點選其他區域,則隱藏軟鍵盤。 主要程式碼如下: override fun dispatchTouchEvent(ev: MotionEvent?): Boolean { if (ev!!.getAction() ==

文獻閱讀受山體陰影影響的冰湖製圖方法研究(Li JunLi等人2018.09IJRS)

一、文獻情況介紹 博主一直在做冰湖提取方面的相關研究,偶然看到這篇文獻,覺得還不錯,特此寫一篇文章記錄並解讀該文獻。 這篇文獻是2018年9月發表在IJRS上的一篇文章,文章針對受山體陰影影像的冰湖物件,提出了相應的提取演算法。 International journal of remo

視訊網站開發:Ajax非同步實現搜尋輸入的提示功能

        在我們實際專案的開發中,有時候一個小小的功能,可能都需要考慮很長的時間,因為必須把這個小功儘可能的做好做到極致。我的視訊網站從2018年年初做到現在,已經歷經了多半年的時光。由開始的功能單一,只能實現海量視訊的展示及免廣告播放功能;到現在的花樣

vue系列elementUI 穿梭右側獲取當前選中項的值的思路

最近 做了一個需求 在查詢結果的表格中,選取(可多選)一些值,獲取到保單號後,開啟一個elementUI的穿梭框,然後獲取到所有業務員,選取一些業務員後,將上一步獲取到的保單號傳遞給業務員。 畫個示意圖    在這裡遇到問題了 問題是 我要獲取到右邊我選取的人的工號和姓名

解決 FTPwindows訪問Ubuntu的vsftpd(FTP伺服器)問題200 Switching to ASCII mode227 Entering Passive Mode (0,0,0

問題:如下, ---------------------------FTP 資料夾錯誤---------------------------開啟 FTP 伺服器上的資料夾時發生錯誤。請檢查是否有許可權訪問該資料夾。 詳細資訊:200 Switching to ASCII mode.227 Entering

Mint-UIAction sheet 用法及詳解(內含取消事件的觸發方法)

鑑於mint-ui官方文件的極簡描述和對功能介紹的點到為止,許多功能的完全實現是需要通過閱讀原始碼才可以知道其真正的用法。 今天給大家介紹一下Action sheet的用法,以及我踩過的坑,感覺比較有意義,希望能幫到各位。 效果圖: 首先我先帶大家看一下官方的介紹: act

Mint-UIsearch元件的使用及詳解(內含取消事件的觸發)

用過Mint-UI的同學都知道,Mint-UI的文件寫的極簡,剛接觸的同學難免會因為文件不夠詳細而暈頭轉向無法下手(日常吐槽) 由於專案的需要,入坑了mint-ui的search元件,文件寫的果然讓人摸不到頭腦。 下邊直接看效果: 我們開發的是基於微信瀏覽器的移動端專案,該圖是

Angularjs 的搜尋輸入外掛angucomplete-alt使用

最近在使用angularjs開發頁面功能的時候有使用到angucomplete-alt外掛, 在此簡單寫下它的用法: 1)從git上下載它到本地plugins目錄; 2)在jsp頁面中引入angucomplete-alt.js檔案; 3)在宣告app的時候將'angucomplete

0082-Linux-Shell-標準輸入標準輸出

標準輸入 標準輸出 標準錯誤 command > filename 把把標準輸出重定向到一個新檔案中 command >> filename 把把標準輸出重定向到一個檔案中(追加)