免寫Javscript！HTML內建INPUT輸入框預載顯示文字與滑入隱藏

雖然INPUT輸入框，是HTML相當基本的語法，但對於大多數的網設來說，要使用到它的機率相當的低，就連梅干也不例外，直到最近開始在實作一些客... 熱門文章 網頁教學 MAC教學 WordPress教學 免費資源 攝影教學 Photoshop教學 Illustrator教學 全站分類 合作提案 攝影 Adobe APP Mac 軟體 免費資源 網設 架站 生活 搜尋 熱門關鍵字: 免費主機空間 書法字產生器 免費3D軟體大集合 商品攝影教學 bootstrap教學 wordpress架設 首頁 » 網頁開發 » 網頁設計 » 免寫Javscript！HTML內建INPUT輸入框，就能顯示預載文字與滑入隱藏 免寫Javscript！HTML內建INPUT輸入框，就能顯示預載文字與滑入隱藏 2019/08/13 　　雖然INPUT輸入框，是HTML相當基本的語法，但對於大多數的網設來說，要使用到它的機率相當的低，就連梅干也不例外，直到最近開始在實作一些客製化的Google表單時，才讓梅干有大量的使用INPUT輸入框的語法，而在INPUT的輸入框中，還有一些屬性可作設定。

  像是預載時，在輸入框中顯示提示文字，當滑鼠移入輸入框時，文字就自動消失，而這一連串的動作，早期梅干都是搭配Javascript，但現在不用這麼麻煩啦！HTML在INPUT輸入框的語法中，還內建幾個屬性可作設定，包含預載時顯示文字，與滑入時隱藏文字，且完全不用寫任何的Javascript，因此有需要的朋友，現在也一塊來看看囉！ 語法提示： placeholder：當輸入框載入時顯示的文字 onfocus：準焦，就是當滑鼠滑入輸入框時 onblur：失焦，就是當滑鼠離開輸入框時 Step1 首先在input的標籤中，分別在placeholder加入要顯示的文字，接著在onfocus的地方，將placeholder變成空白，最後onblur就是滑鼠移開輸入框時，再顯示placeholder的提示文字，若輸入框已有文字，則不會再顯示提示文字。

Step2 當完成後，立馬可以來實驗一下，當滑鼠移到輸入框時，輸入框會被選取同時裡面的文字會消失，當移開時提示文字會再次顯示，這樣是不是超簡單的呀！！完全不用寫到任何的Javascript啦！ 範例預覽： SeethePeninput-removeplaceholderonfocusbyminwt(@minwt)onCodePen. ※如有發現掉圖或檔案無法下載，請由回應區留言告知，將會盡速處理！ ※本站採用CC授權請勿轉貼本站文章，謝謝。

html語法, input輸入框語法, onfocus教學, placeholder教學, 推薦文章 2022－10個免費可商用的圖庫大集合！從人像、食物、風景、人文一應具全 Adobe雲端工具「移除背景」只需拖曳照片立即去背 Adobe雲端工具「免費影片合併」自動合併影片外，甚至還可手動修剪影片 Adobe官方正式推出雲端版Photoshop，只需登入Adobe帳號立即可使用 免費MAC模擬器UTM，讓新版的MACM1也可安裝Windows11 密技！如何讓ibon列印時，圖片與文字可以依原尺寸不被縮放 超省方案！到超商洗證件照8秒立即拿，1張2吋照一元不到 LocalbyFlywheel一鍵快速在本機架設好WordPress，並支援外連與SSL安全加密 Pixelconversions線上一鍵將像素與公分單位快速互轉 四款零延遲iPad延伸螢幕APP，讓iPad變成筆電的外接螢幕 Clockology免費可自行設計AppleWatch表面，並解決無同步選項的安裝教學 《快牙》透過藍芽實現iPhone/Android跨平台互傳檔案與APP 精選文章 《毛筆字線上生成器》一鍵快速產生出各名家書法字 登入中華電信光世代數據機(I-040GW)的管理者帳號、密碼與網址 超豪邁又有氣勢！日文書法手寫字體線上產生器 10大最受歡迎的免費3D軟體大集合 馬桶堵塞網路流傳三招實測，這招最簡單！最有效！ 透過7-11ibon找回遺失的停車繳費單 線上PANTONE色號查詢器，並轉換成CMYK、RGB、網頁色碼，同時還有配色組合可參考 免越獄！透過AltStore讓iPhone/iPad也可自行安裝未簽署的IPA檔教學 《ShutterCounter》線上檢測相機快門釋放次數(支援RAW檔) 0元架站！精選 0元架站！全新GoogleSites協作平台，只要拖、拉、放，立即打造出漂亮RWD網頁 0元架站！Vercel免費網頁空間，可綁定域名、CDN與SSL 0元架站！Forestry打造HUGO即見即所得的編輯介面與整合CloudflarePages全自動化更新 0元架站！CloudflarePages提供無限流、無限容量，免費網頁空間，同時還可綁定自己的網域名稱架設教學 0元架站！DigitalOcean現在也能部署Hugo網站，並有免費方案與CDN服務 0元架站！roast.io免費靜態HTML網頁空間，可綁定網域與10GB流量 0元架站！Neocities免費靜態HTML空間，內建線上檔案管理器拖拉間，快速打造自己的網站 0元架站！NSurge免費無限流量靜態網頁空間，可綁定網域&支援SSL 新年主題文章 台灣正宗《十六張麻將》麻將台數表一覽表 今年來點不一樣的紅包袋！將小朋友塗鴉做成閃亮亮紅包袋,包給長輩最閃耀 《紅包袋別丟!!》新年限定!!紅通通喜氣開運皮夾，好運、財氣都來到! [DIY]7-11自製紅包袋教學！多少量你決定，免等待、立即取件 紙箱再利用DIY貓玩具，「氣虎虎沖天飛車」跟主子一起歡慶新虎年 2022全國新鈔提領地圖懶人包，讓你快速找到就近提領新鈔的銀行過好年 ⇠UglifyJS免安裝，線上貼上Javascript原始碥立即壓縮並混淆js ImageResizer線上社群縮圖產生器，還可手動微調照片縮圖範圍⇢