首頁 > web前端 > js教程 > 主體

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

PHP中文网
發布: 2017-03-28 16:13:36
原創
2556 人瀏覽過

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


  10.回車後焦點從目前文字方塊轉移到下一個文字方塊:



  11.回車後焦點從目前文字方塊轉移到指定位置:


相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板