正在回答 回答被采纳积分+1
4回答
好帮手慕言
2021-03-11 14:12:59
同学你好,可以参考下方的代码和注释理解:
1 | <!DOCTYPE html>< br >< html >< br >< br >< head lang = "en" >< br > < meta charset = "UTF-8" >< br > < title >onblur和onfocus</ title >< br > < style type = "text/css" >< br > .red {< br > border: 1px solid red;< br > }< br > </ style >< br ></ head >< br >< br >< body >< br > 姓名:< input type = "text" > < span ></ span >< br > < script >< br > // 获取元素< br > var input = document.getElementsByTagName("input")[0];< br > var span = document.getElementsByTagName("span")[0];< br > // 绑定获取焦点事件< br > input.onfocus = function () {< br > //将失去焦点时给输入框加的样式去掉< br > this.className = "";< br > if (input.value == "") {//如果值为空,出现提示文字< br > span.innerHTML = "请输入您的姓名";< br > }< br > }< br > // 绑定失去焦点事件< br > input.onblur = function () {< br > //如果值为空,出现提示文字,输入框加上样式< br > if (input.value == "") {< br > span.innerHTML = "用户名不能为空";< br > this.className = "red";< br > }< br > //如果值不为空,提示文字消失,输入框没有样式< br > else {< br > this.className = "";< br > span.innerHTML = "";< br > }< br > }< br > </ script >< br ></ body >< br >< br ></ html >< br > |
编程题是给出任务提示的,如下:
同学不能不思考,直接来问答区提问,老师给出代码之后,对同学的思考问题的能力是没有太大帮助的,同学要尝试自己写,如果哪里实现不了,可以来问答区提问,老师根据同学写的代码给出建议,这样同学的能力才能得到提升呦。
祝学习愉快~
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧