1. 程式人生 > >input點選後placeholder中的提示訊息消失

input點選後placeholder中的提示訊息消失

html中,placeholder作為input的一個屬性,起到了在輸入框中佔位並提示的作用。

但是有一些瀏覽器,如chrome,當滑鼠點選輸入框時,placeholder的值不消失,只有輸入資料才消失,會使前端使用者體驗大打折扣。

看了很多大神的方法,寫了長長的js,看著有點吃力,就想到了下面這種最傻的方法解決了這個問題。

html程式碼:

?
1 <input type=
"text" placeholder= "多個關鍵詞空格隔開" >

滑鼠點選input時,placeholder中的提示資訊消失:

?
1 <input type=
"text" placeholder= "多個關鍵詞空格隔開" onfocus= "this.placeholder=‘‘" onblur= "this.placeholder=‘多個關鍵詞空格隔開‘" >

PlaceHolder的兩種實現方式

placeholder屬性是HTML5 中為input新增的。在input上提供一個佔位符,文字形式展示輸入欄位預期值的提示資訊(hint),該欄位會在輸入為空時顯示。

?
1 <input type= "text" name= "loginName" placeholder= "郵箱/手機號/QQ號" >

目前瀏覽器的支援情況

然而,雖然IE10+支援placeholder屬性,它的表現與其它瀏覽器也不一致
•IE10+裡滑鼠點選時(獲取焦點)placeholder文字消失
•Firefox/Chrome/Safari點選不消失,而是鍵盤輸入時文字消失

這相當噁心,如果使用了placeholder屬性。產品經理還是不依不饒,會講為什麼IE裡是點選的時候提示文字消失,Chrome裡卻是鍵盤輸入的時候提示文字消失。要求前端工程師改成一樣的表現形式。鑑於此,以下兩種實現方式均不採用原生的placeholder屬性。

兩種方式的思路

1.(方式一)使用input的value作為顯示文字

2.(方式二)不使用value,新增一個額外的標籤(span)到body裡然後絕對定位覆蓋到input上面

兩種方式各有優缺點,方式一佔用了input的value屬性,表單提交時需要額外做一些判斷工作,方式二則使用了額外的標籤。

方式一

?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

相關推薦

inputplaceholder提示訊息消失

html中,placeholder作為input的一個屬性,起到了在輸入框中佔位並提示的作用。 但是有一些瀏覽器,如chrome,當滑鼠點選輸入框時,placeholder的值不消失,只有輸入資料才消失,會使前端使用者體驗大打折扣。 看了很多大神的方法,寫了長長的js,看著有點吃力,就

文字框提示樣式,滑鼠獲得焦點時提示內容消失

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.

scrapy+selenium關於同一個頁面模擬,開啟新的標籤頁,切換到新頁面的方法

windows = spider.browser.current_window_handle # 定位當前頁面控制代碼 time.sleep(5) target = spider.browser.find_element_by_id("toolber-keyword") keyword

如何避免Toast多次一直提示

一直點選按鈕跳出訊息框半天不消失,使得使用者體驗極差 這時我們需要將Toast的呼叫封裝成一個介面,寫在一個公共的類當中 package com.example.administrator.myapplication; import android.content.Context

WPFButton閃爍的解決辦法

WPF中的Button點選後總是在那兒閃啊閃,有什麼辦法可以讓它不閃爍呢。 我們仔細觀察,其實Button不僅僅只是在點選後會閃爍,在其通過點選或按Tab鍵獲得焦點後都會閃爍,而通過點選其他按鈕或通過按Tab鍵讓Button失去焦點後就不閃爍了。如此我們可以推測出這不是點選

android imageButton 按鈕前,按鈕顏色的變化

我們在開發的過程中,往往為了美化介面的需要,會修改按鈕的預設外觀,而因為Android中的按鈕有三種狀態—預設,被點選,被選中。所以,如果要改變按鈕的外觀,需要對這三種情況都做出修改,也許在以往,我們最容易想到的就是,手動監聽按鈕的選中和點選事件,然後寫程式碼來替換按鈕的背景,但是在android中,我們

js——input框實現淘寶一樣的商品數量的增加和減少

 <script>               //商品數量的增加                 function number(){                 var Input0=document.getElementById('input0');                 va

除a、button、input出現的藍色邊框

com only .cn tex 如何解決 align put spa http 在微網站上面如何去除a、button、input點擊後出現的藍色覆蓋層或者邊框 0 [待解決問題] 瀏覽: 2959次 a,button,input{ -webkit-tap-highligh

Altium Designer 17 --- 原理圖的元器件,選中PCB對應元器件

方法一:單擊選中原理圖中元器件,然後單擊tools>Seclect PCBcomponents,即可在PCB中看到該器件的高亮顯示; 方法二:單擊Tools>Cross Select Mode,或用快捷鍵Ctr+Shift+X鍵,然後在原理圖中單擊任意器件,在PCB中都可高亮。 方法三:Too

Jquery滑鼠變色,另一個按鈕顏色還原

轉載一個! Jquery滑鼠點選後變色,點選另一個按鈕顏色還原 <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

vue-scroller的item進入其他頁面,返回時,定位到點前的item位置

1.新建.vue檔案封裝vue-scroller,並新增如下方法 getPosition(){ return this.$refs.scroller.getPosition() }, scrollTo(x, y, animate){ this.$refs

js出現外部隱藏

 對指定div設定焦點 為0,tabindex="0" 當滑鼠點選div時焦點變為-1,執行onfocus="show1()"所呼叫的函式 ,show1()。當輸變電及其他地方,也就是說滑鼠失去焦點,則執行onblur="unshow1()"操作,也就是呼叫unshow函式。

UICollectionView 修改顏色

一般UICollectionView點選後會顯示預設的透明色,希望修改為特定的顏色,最終發現是設定背景色的view設定錯了,應該是:[cell.contentView setBackgroundColor:[UIColor redColor]]; 具體程式碼如下: - (BOOL)co

頁面圖片的顯示效果

{    field: "filepath1",     title: "整改前圖片",     sortable: false,  &nb

Android主介面連續兩次物理返回鍵提示退出應用功能實現

實現內容:當點選一次 back 鍵時,程式提示“再按一次退出程式” ,當點選兩次 back 鍵,兩次之間的時間小於 3s 時,App就退出。  實則是對按鍵back監聽。 重寫onKeyDown(),監聽back 宣告兩個常量: /** 上次點選返回鍵的時間 */ p

java簡單部落格系統(二)導航標籤頁頁面內容改變及背景色改變

一、同一個Servlet處理多個請求,顯示不同的頁面內容 導航標籤頁 bootStrap模板: <ul class="nav nav-tabs"> <li role="presentation" class="active"><a href="#">Home

android 如何讓通知不被清除或者消失

分享一下我老師大神的人工智慧教程!零基礎,通俗易懂!http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識,造福人民,實現我們中華民族偉大復興!        

白鷺引擎實現長按離開事件繫結

白鷺引擎 版本:5.2.8 描述:實現長按效果 繫結事件: this.物件.addEventListener(egret.TouchEvent.TOUCH_BEGIN,this.onPlayClick,this); //離開的事件

JS實現倒計時確認

html: <button id="test01" class="savebtn" onclick="test01F()" type="button" >test</button> js: var time = 10; var timeSet;

關於.chosen()出現自動隱藏的問題

在做專案的時候,遇到一個很奇怪的問題! 在HTML 頁面中呼叫 <link rel="stylesheet" type="text/css" href="../../static/css/chosen.css"> <script type="text/javascrip