搜尋文字框

阿新 • • 發佈：2018-11-06

當文字框裡有placeholder屬性時，獲得焦點，沒有清空文字框

 <input type="text" placeholder="請輸入搜尋關鍵字" id="txtSearch">
 <input type="button" value="搜尋" id="btnSearch">

效果如圖：
在這裡插入圖片描述
想要文字框獲取焦點時清空文字框

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name= 
"viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>搜尋文字框</title>
    <style>
        .gray {
            color: gray;
        }
        
        .balck {
            color: black;
        }
    < 
/style>
</head>

<body>
    <input type="text" class="gray" value="請輸入搜尋關鍵字" id="txtSearch">
    <input type="button" value="搜尋" id="btnSearch">
    <script>
        //當文字框獲得焦點，如果文字框裡的內容是 請輸入搜尋關鍵字 則清空文字框，並且讓字型變成黑色
        var txtSearch = document.getElementById("txtSearch" 
);
        //獲取焦點的事件
        txtSearch.onfocus = function() {
                if (this.value == "請輸入搜尋關鍵字") {
                    this.value = "";
                    this.className = "black";
                }
            }
            //當文字框失去焦點，如果文字框裡的內容為空  還原文字框裡的文字，並且讓文字變成灰色
            //失去焦點事件
        txtSearch.onblur = function() {
            //判斷文字框中的內容為空   
            //if (this.value == "")
            if (this.value.length == 0) {
                this.value = "請輸入搜尋關鍵字";
                this.className = "gray";
            }
        }
    </script>
</body>

</html>

搜尋文字框

當文字框裡有placeholder屬性時，獲得焦點，沒有清空文字框 <input type="text" placeholder="請輸入搜尋關鍵字" id="txtSearch"> <input type="button" value="搜尋" id="btnSe

JavaScript讓登入或搜尋文字框自動獲得焦點

這確實是個值得注意的細節，今天在XX網站登入介面上遇到了，就先記錄下來了，每個網頁都有其專注的功能，有的專注於文章資訊等資訊呈現，有的專注於視訊播放，有的專注於登入，今天要說的就是專注於像登入或搜尋等類似功能的網頁，開啟這一類頁面，你會發現有些做得比較好的頁面，輸入焦點會

html中怎麼自動獲得搜尋文字框的游標焦點

<!DOCTYPE html> <html> <head> <meta charset="utf-8" />

js控制文字框回車提交表單進行搜尋

// 此段程式碼為示例程式碼並不能執行，若需使用請根據實際情況做出更改 <form action="/PayBills/billContentList" method="post" id="searchForm" autocomplete="off" onkeypress="if(

Android搜尋框自動提示文字框——（單一提示）

AutoCompleteTextView(單一提示) package com.example.android_06; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import androi

easyUI combobox 文字框模糊搜尋問題

優點：ajax 非同步獲取資料，動態繫結，支援半模糊查詢（順序查詢）缺點：不支援純模糊查詢上圖： html 頁面程式碼 <input class="easyui-

android_文字框實現搜尋和清空效果

前言　　本文實現的效果：文字框輸入為空時顯示輸入的圖示；不為空時顯示清空的圖示，此時點選清空圖示能清空文字框內輸入文字。正文　　一、實現效果　　　　　　　　　　　　　二、實現程式碼　　　　監聽輸入 /** * 動態搜尋

Android EditText 文字框實現搜尋和清空效果

前言　　本文實現的效果：文字框輸入為空時顯示輸入的圖示；不為空時顯示清空的圖示，此時點選清空圖示能清空文字框內輸入文字。宣告　　歡迎轉載，但請保留文章原始出處:) 　　　　部落格園：http://www.cnblogs.com 　　　　農民伯伯： http://over140.cnblogs.

帶搜尋圖示的文字框

1、效果圖 2、HTML 程式碼 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv=

文字框實現搜尋和清空效果

前言　　本文實現的效果：文字框輸入為空時顯示輸入的圖示；不為空時顯示清空的圖示，此時點選清空圖示能清空文字框內輸入文字。正文　　一、實現效果　　　　　　　　　　　　　二、實現程式碼　　　　監聽輸入 /** * 動態搜尋 */private TextWatcher t

下拉框+文字框+搜尋按鈕

<!doctype html> <html langj="zh"> <head> <meta charset="gbk"> <title>搜尋下拉</title> <l

input propertychange事件，當input的value值發生改變時觸發（文字框的值即時搜尋）

　 input是標準的瀏覽器事件，一般應用於input元素，當input的value發生變化就會發生，無論是鍵盤輸入還是滑鼠黏貼的改變都能及時監聽到變化只要當前物件屬性發生改變。　　感覺找到了真愛。。。。。但是 onpropertychange 這兩個事件在 IE9

【前端】在文字框按回車鍵搜尋

<form method="post" action="/index.php?controller=blog&action=stage" > <input type="tex

修改IOS中UISearchBar的取消按鈕背景、搜尋內容輸入文字框背景和UISearchBar的背景

轉載請標明出處：http://blog.csdn.net/android_ls/article/details/39993433 測試的手機IOS系統版本號為：6.1.3，實現步驟如下： 1、新增U

replace限制文字框只能輸入數字，數字和字母等的正則表示式

1.文字框只能輸入數字程式碼(小數點也不能輸入) <input onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')">&

高階控制元件自動提示文字框與下拉列表

一、高階控制元件使用步驟 1 、獲取資料 2 、建立介面卡 3 、繫結介面卡二、自動提示文字框 1 、AutoCompleteTextView(單一提示) android:completionThreshold=”1” 2 、MultiAutoCompleteTextV

判斷input文字框獲取焦點和失去焦點

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>判斷input文字框

自動提示文字框與下拉列表

高階控制元件與低階控制元件區別是否使用介面卡介面卡種類和作用 2.1 種類陣列介面卡 ArrayAdapter new ArrayAdapter(this,R.layout.actv_style, names); 簡單介面卡 SimpleAdapter 也叫“並不簡

如何獲取視窗文字框內的內容

通過SendMessage函式獲取文字框內容一效果展示先看效果如圖。右面窗體點選“獲取”即可獲取到左面窗體文字框內容。二實現原理 1.通過FindWindow函式獲取到“測試視窗”的控制代碼 2.獲取窗體"Test"la

如何獲取視窗內文字框的控制代碼

一背景某種情況下，需要從某窗體獲取該窗體文字框內的內容，發現文字框並沒有標題名，無法獲取文字框控制元件的控制代碼。接下來，我將介紹我獲取所需文字框控制元件控制代碼方法。二使用Spy++獲取如圖，開啟Spy++可以直接獲取到

搜尋文字框

相關推薦