textarea焦點的用法實作取得焦點清空失去焦點提示效果_javascript技巧

效果圖：

具體實現：

1、textarea標籤內容

複製代碼 代碼如下:

備註： td>

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.滑鼠移至文字方塊全選文字方塊內的文字：

白鴿男孩 <br><textarea onmouseover="”focus()”" onfocus="”select()”">白鴿男孩
　　10.回車後焦點從目前文字方塊轉移到下一個文字方塊：

白鴿男孩
白鴿男孩
　　11.回車後焦點從目前文字方塊轉移到指定位置：

白鴿男孩