如何讓文字框內的提示資訊在啟用文字框時清空

2022-03-08 18:20:38 字數 704 閱讀 7355

如何讓文字框內的提示資訊在啟用文字框時清空

解決思路:

當需要填寫的文字框很多時,在每個文字框內寫上提示資訊是個不錯的辦法,但這樣一來使用者在填寫該項時必須先把提示文字刪掉,非常不方便。所以應該讓文字框更人性化一點,在focus時檢查當前值是否為文字框的預設值,是則清空,否則保持不變,而在blur時檢查文字框的內容是否為空,是則重置為預設值,否則保持不變。

具體步驟:

1.設定文字框的預設值或提示資訊。

2.判斷、清空文字框內容的函式。

function cls()

3.判斷、還原文字框內容的函式。

function res()

4.給文字框新增觸發事件onfocus和onblur,呼叫函式處理。完整**:

注意:本例的方法對大部分表單控制項都有效,比如多行文字框。

特別提示

執行完整**,在滑鼠第一次單擊文字框時該文字框內容將被清空,在文字框外單擊時文字框內容將還原回預設值。如果改變了文字框的值,將不再有任何變化。圖1.4.28為**執行時的初始效果,圖1.4.29為滑鼠單擊第二個文字框後的效果。 特別說明

本例主要是物件的defaultvalue屬性和onfocus、onblur事件應用。

defaultvalue 設定或獲取物件的初始內容。

onblur 在物件失去輸入焦點時觸發。

onfocus 當物件獲得焦點時觸發。

input文字框的提示效果

input文字框的提示有很多種,可以根據需求進行選擇 通過設定placeholder屬性值進行提示 placeholder 屬性提供可描述輸入字段預期值的提示資訊 hint 該提示會在輸入欄位為空時顯示,並會在字段獲得焦點時消失。例如 通過設定title屬性進行提示 title 屬性規定關於元素的額...

去掉文字框中的自動提示

html 將input元素的autocomplete屬性設定為off可以關閉自動提示 如果所有表單元素都不想使用自動提示功能,只需在表單form上設定autocomplete off。net asp.net textbox控制項也提供了 autocompletetype 屬性,提供了加強版的auto...

如何讓表單文字框左邊標籤文字右對齊 label

當我們設計表單文字框布局時,希望布局好看。前邊的文字與文字框契合完美。文字上下行對齊。通常使用 標籤實現 其實也可以用 標籤實現 下邊是乙個例子 如何修改css實現文字框和前邊字型右對齊。html 結果圖 該例是將label這個 容器 變寬。使得其可以任裡邊的字型自由移動。該例中中加入文字框前邊的字...