社群
學習
工具庫
AI工具
休閒
搜尋
繁体中文
目錄
聚焦型提示語消失
輸入型提示語消失
首頁 web前端 js教程 兩種方法實作文字方塊輸入內容提示消失_javascript技巧

兩種方法實作文字方塊輸入內容提示消失_javascript技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
May 16, 2016 pm 05:40 PM
提示 文字方塊 消失
第一種方法：
基於HTML5 input標籤的新特性 - placeholder 。另外，x-webkit-speech 屬性可以實現語音輸入功能。
複製程式碼 程式碼如下:




第二種方法：
用span模擬，定位span，借助JS鍵盤事件判斷輸入，確定span裡的內容顯示隱藏。
複製程式碼 代碼如下:

-/html/PUBL "IC DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



無標題文件 <br><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> <br><script type="text/javascript"> <BR>$(document).ready(function(){ <BR>$("#focus .input_txt").each(function(){ <BR>var thisVal =$(this).val(); <BR>//判斷文字方塊的值是否為空，有值的情況就隱藏提示語，沒有值就顯示<BR>if(thisVal!=""){ <BR>$(this).siblings("span").hide(); <BR>}else{ <BR>$(this).siblings("span").show(); <BR>} <BR> //聚焦型輸入框驗證<BR>$(this).focus(function(){ <BR>$(this).siblings("span").hide(); <BR>}).blur(function( ){ <BR>var val=$(this).val(); <BR>if(val!=""){ <BR>$(this).siblings("span").hide(); <BR>}else{ <BR>$(this).siblings("span").show(); <BR>} <BR>}); <BR>}) <BR>$("#keydown .input_txt") .each(function(){ <BR>var thisVal=$(this).val(); <BR>//判斷文字方塊的值是否為空，有值的情況就隱藏提示語，沒有值就顯示<BR>if(thisVal!=""){ <BR>$(this).siblings("span").hide(); <BR>}else{ <BR>$(this).siblings("span") .show(); <BR>} <BR>$(this).keyup(function(){ <BR>var val=$(this).val(); <BR>$(this).siblings("span ").hide(); <BR>}).blur(function(){ <BR>var val=$(this).val(); <BR>if(val!=""){ <BR>$ (this).siblings("span").hide(); <BR>}else{ <BR>$(this).siblings("span").show(); <BR>} <BR>}) <BR>}) <BR>}) <BR></script> <br><style type="text/css"> <BR>form{width:400px;margin:10px auto;border:solid 1px #E0DEDE; background:#FCF9EF;padding:30px;box-shadow:0 1px 10px rgba(0,0,0,0.1) inset;} <BR>label{display:block;height:40px;position:relative;margin:20px 0 ;} <BR>span{position:absolute;float:left;line-height:40px;left:10px;color:#BCBCBC;cursor:text;} <BR>.input_txt{width:398px;b:sol) <BR>.input_txt{width:398px;b:solorderid 1px #solorder ccc;box-shadow:0 1px 10px rgba(0,0,0,0.1) inset;height:38px;text-indent:10px;} <BR>.input_txt:focus{box-shadow:0 0 4px rgba(255,153,164153,164153,164153, ,0.8);border:solid 1px #B00000;} <BR>.border_radius{border-radius:5px;color:#B00000;} <BR>h2{font-family:"微軟雅黑";text-shadow:1px 1px 3px #fff;} <BR></style> <br> <br>

聚焦型提示語消失






輸入型提示語消失






html>
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

顯示更多

熱門文章

刺客信條陰影：貝殼謎語解決方案
1 個月前 By DDD
Windows 11 KB5054979中的新功能以及如何解決更新問題
3 週前 By DDD
在哪裡可以找到原子中的起重機控制鑰匙卡
1 個月前 By DDD
如何修復KB5055523無法在Windows 11中安裝？
2 週前 By DDD
Inzoi：如何申請學校和大學
3 週前 By DDD
顯示更多

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

顯示更多

熱門話題

gmail信箱登陸入口在哪裡
7773
15
Java教學
1644
14
CakePHP 教程
1399
52
Laravel 教程
1296
25
PHP教程
1234
29
顯示更多
Related knowledge
谷歌瀏覽器提示此標籤頁的內容正在被分享怎麼辦？ 谷歌瀏覽器提示此標籤頁的內容正在被分享怎麼辦？ Mar 13, 2024 pm 05:00 PM

　　Google瀏覽器提示此標籤頁的內容正在被分享怎麼辦？我們在使用Google瀏覽器開啟新標籤的時候有時會遇到提示此標籤頁的內容正在被分享，那麼這是怎麼回事？以下就讓本站來為使用者來仔細的介紹一下谷歌瀏覽器提示此標籤頁的內容正在被共享的問題解析吧。　　Google瀏覽器提示此標籤頁的內容正在被共享解決方法　　1、打開谷歌瀏覽器，在瀏覽器右上角可以看到三個點「自訂和控制Googlechrome」用滑鼠點擊圖示進行圖示。　　2、點擊後，Google瀏覽器的選單視窗將彈出到下面，滑鼠將移動到「更多工具

OneNote如何設定圖片為背景 OneNote如何設定圖片為背景 May 14, 2023 am 11:16 AM

Onenote是Microsoft提供的最好的筆記工具之一。結合Outlook和MSTeams，Onenote可以成為提高工作和個人創意工作效率的強大組合。我們必須以不同的格式做筆記，這可能不僅僅是把事情寫下來。有時我們需要從不同來源複製圖像並在日常工作中進行一些編輯。如果知道如何應用更改，則貼上在Onenote上的圖像可以發揮很大作用。您在使用Onenote時是否遇到過貼在Onenote上的圖像無法讓您輕鬆工作的問題？本文將著重於在Onenote上有效地使用圖像。我們可

解決win10桌面圖示全部消失的方法 解決win10桌面圖示全部消失的方法 Dec 25, 2023 pm 04:55 PM

不知道大家有沒有遇過早上起來打開電腦，發現電腦的桌面圖示全都不見了，這個時候不要慌，可能是你快捷鍵把桌面的圖示的刪除了，這個可以直接在回收站恢復就可以了，如果不是，還可以查看顯示圖示的方法恢復，具體的步驟下面一起來看看。 win10桌面圖示全部消失的恢復方法1、如果桌面只剩下一個回收站，那麼是有可能你把所有轉面快捷鍵都刪除了。這時候你點開回收站看是否能找到刪除的捷徑。 2.如果看到有你刪除的快捷方式，那麼就選取所有快捷方式，點選滑鼠右鍵選擇還原。 3.也可以直接點選滑鼠右鍵，點選撤銷刪除。這樣所有

如何隱藏文字直到在 Powerpoint 中單擊 如何隱藏文字直到在 Powerpoint 中單擊 Apr 14, 2023 pm 04:40 PM

如何在 PowerPoint 中的任何點擊之前隱藏文本如果您希望在單擊 PowerPoint 幻燈片上的任意位置時顯示文本，那麼設置起來既快速又容易。若要在 PowerPoint 中按一下任何按鈕之前隱藏文字：開啟您的 PowerPoint 文檔，然後按一下「插入 」功能表。點選新幻燈片。選擇空白或其他預設之一。仍然在插入選單中，按一下文字方塊。在投影片上拖出一個文字方塊。點擊文字方塊並輸入您

Win7無線網路介面卡不見了 Win7無線網路介面卡不見了 Dec 23, 2023 pm 05:57 PM

很多用戶都回饋說win7無線網路適配器消失了，遇到這種情況很可能是網卡或是網卡驅動出現了問題，我們只需要修復一下網卡驅動或更換一個好的網卡就可以解決。 win7無線網路適配器消失了1、首先右鍵開始按鍵，選擇“裝置管理員”2、接著我們找到“網路介面卡”，右鍵可以選擇先更新一下驅動，或是先停用裝置再啟用，也可以在這裡點擊“屬性”3、點擊屬性之後，再點擊上方的“驅動程式”，在這裡點擊“更新驅動程式”4、點擊後這裡再選擇”自動搜尋更新驅動檔案“5、完成之後也可以把電腦的網絡重置一下。首先還是按win

試試新的鈴聲和文字提示音：在 iOS 17 的 iPhone 上體驗最新的聲音提醒功能 試試新的鈴聲和文字提示音：在 iOS 17 的 iPhone 上體驗最新的聲音提醒功能 Oct 12, 2023 pm 11:41 PM

在iOS17中，Apple徹底改變了其全部鈴聲和文字音調選擇，提供了20多種可用於電話、簡訊、鬧鐘等的新聲音。以下是查看它們的方法。與舊鈴聲相比，許多新鈴聲的長度更長，聽起來更現代。它們包括琶音、破碎、樹冠、小木屋、啁啾、黎明、出發、多洛普、旅程、水壺、水星、銀河系、四邊形、徑向、清道夫、幼苗、庇護所、灑水、台階、故事時間、戲弄、傾斜、展開和山谷。反射仍然是預設鈴聲選項。還有10多種新的文字提示音可用於傳入簡訊、語音郵件、傳入郵件警報、提醒警報等。要存取新的鈴聲和文字鈴聲，首先，請確保您的iPh

Vue中如何處理使用者輸入的校驗和提示 Vue中如何處理使用者輸入的校驗和提示 Oct 15, 2023 am 10:10 AM

Vue中如何處理使用者輸入的校驗和提示在Vue中處理使用者輸入的校驗和提示，是前端開發中常見的一個需求。本文將介紹一些常用的技巧和具體的程式碼範例，幫助開發者更好地處理使用者輸入的校驗和提示。使用計算屬性進行校驗在Vue中，可以使用計算屬性來監控和校驗使用者輸入。可以定義一個計算屬性來代表使用者輸入的值，並在該計算屬性中進行校驗邏輯。下面是一個範例：data(){

如何在 Word 中製作行事曆 如何在 Word 中製作行事曆 Apr 25, 2023 pm 02:34 PM

如何使用表格在Word中製作日曆如果您想建立一個完全符合您的規範的日曆，您可以使用Word中的表格從頭開始做所有事情。這使您可以為日曆設計所需的確切佈局。在Word中使用表格建立行事曆：開啟一個新的Word文件。按Enter幾次，將遊標向下移動到頁面。點選插入 選單。在功能區中，按一下表格圖示。點擊並按住左上角的方塊並拖曳出一個7×6的表格。在第一行填寫星期幾。使用另一個日曆作為參考填寫月份中的日期。反白顯示當前月份以外的任何日期。在主選單中，點擊文字顏色圖示並選擇灰色。對當前月份以

See all articles