abstract:var itext,count,sendwindow.onload = function(){ // 页布加载后再进行javascript语句 itext = document.getElementById("text"); //获取TextArea句柄,通过x.value.length获取其字符长度 count = document.
var itext,count,send
window.onload = function(){ // 页布加载后再进行javascript语句
itext = document.getElementById("text"); //获取TextArea句柄,通过x.value.length获取其字符长度
count = document.getElementById("count"); //获取span.#count的句柄
send = document.getElementById("send"); //获取发布按钮的句柄
itext.style.resize="none";
remain = 150;
count.innerHTML = remain; //初始数量
// $count.innerHTML = $num; //通过pan.#count的句柄.innerHTML调整其内容
// console.log(num); //调试
//点击textarea后,改变其边框样式
itext.onclick =function changeborder(){
itext.style.border='5px solid #CCFFFF'; //改变边框颜色
itext.style.backgroundColor="#FFFFCC" //改变背景颜色
}
//焦点脱离textarea后,恢复其边框样式
itext.onblur =function changeborder(){
itext.style.border='5px solid #FF9999'; //改变边框颜色
itext.style.backgroundColor="#FFF" //改变背景颜色
}
//先定义TextArea的某个键盘的键被松开事件,获取textarea已输入字符个数,并插入"到".count";
itext.onkeyup = function shuru(){
num = itext.value.length;
remain = 150 - num; //定义最大支持输入字符数,目前仍可输入多少个字符
count.innerHTML = remain; //x.innerHTML改变.count内容
// console.log(remain) //调试
}
//定义[发布]按钮的触发事件
send.onclick = function fabu(){
num = itext.value.length;
if(num == 0){
alert("不能发布空内容,请录入相关内容!"); //重新给textarea赋予焦点
itext.focus();
}else{
alert("此次发布的内容字符数有"+num+",发布成功啦!");
console.log(itext.value) //调试获取itext.value内容
itext.value=""; //清空textarea
itext.focus(); //重新给textarea赋予焦点
}
}
}
// 总结:此节课很有意义,对javascript控制标签属性、内容有了更深刻的理解,于是在作业中自己扩展测试了另外一些事件和根据textarea的value属性调试获取textarea的内容;
Correcting teacher:西门大官人Correction time:2019-04-22 09:57:26
Teacher's summary:作业完成的非常好,只是没有看到html代码。还有尝试优化一下代码,不用全局变量的话,如何处理?