這篇文章主要介紹了textarea焦點的用法實現獲取焦點清空失去焦點提示效果,需要的朋友可以參考下

效果圖：

具體實現：

1、textarea標簽內容

備注：

2、初始化使點擊添加按鈕時，內容顯示最多能輸入50個字

$("#introduction").val("最多能輸入50個字");

document.getElementById("introduction").style.color="gray";

3、js腳本

function getAddFocus(id){//針對添加操作中的簡介和備注，textarea獲得焦點清空輸入框

var textarea=document.getElementById(id);

textarea.value="";

textarea.style.color="black";

}

function lostAddFocus(id){//針對添加操作中的簡介和備注，textarea失去焦點且內容為空時，顯示提示信息

var textarea=document.getElementById(id);

var textarea_value=textarea.value;

if(textarea_value==""){

textarea.value="最多能輸入50個字";

textarea.style.color="gray";

}

}

csdn小伙伴寫的textarea焦點的用法參考：

1.文本框顯示默認文字：

白鴿男孩

白鴿男孩

2.鼠標點擊文本框，默認文字消失：

白鴿男孩

白鴿男孩

3.鼠標移至文本框，默認文字消失：

白鴿男孩

白鴿男孩

4.鼠標點擊文本框，默認文字消失，點擊文本框外任意區域，默認文字又重現：

白鴿男孩

白鴿男孩

5.鼠標移至文本框，默認文字消失，鼠標移出文本框，默認文字又重現：

白鴿男孩

白鴿男孩

6.鼠標單擊文本框，文本框內任何文字消失(包括默認文字及后來輸入的文字)：

白鴿男孩

白鴿男孩

7.鼠標移至文本框，文本框內任何文字消失(包括默認文字及后來輸入的文字)：

白鴿男孩

白鴿男孩

8.單擊文本框后全選文本框內的文字：

白鴿男孩

白鴿男孩

9.鼠標移至文本框全選文本框內的文字：

白鴿男孩

白鴿男孩

10.回車后焦點從當前文本框轉移到下一個文本框：

白鴿男孩

白鴿男孩

11.回車后焦點從當前文本框轉移到指定位置：

白鴿男孩

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的textarea 聚焦后边框_textarea焦点的用法实现获取焦点清空失去焦点提示效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。