textarea焦点的用法实现获取焦点清空失去焦点提示效果_javascript技巧

效果图：

具体实现：

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.回车后焦点从当前文本框转移到指定位置：

白鸽男孩