实现如下图所示的手机号码输入框。要求:只允许输入十一位的数字,当鼠标点击鼠标框时,左侧显示提示信息。若输入正确,左边显示√
的图片,若输入错误,左边显示X
的图片。
实现效果:(主要是实现功能,样式那些就暂时不整那么花哨了)
分析:很明显要用到鼠标点击事件的onfocus()
方法和onblur()
方法。其次,改变左侧显示的图片时,要用到innerHTML
属性。
思路:
- 在设置样式时,tip应该隐藏。
- 获取输入框和提示框
- 当输入框获取焦点时,显示提示框。
- 当输入框失去焦点时,检测输入框内容是否有效。是——>right;否——>error。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{