事件基础一

xiaoxiao2021-02-28  108

焦点事件

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>焦点事件</title> </head> <body> <input type="text" name="" placeholder="请输入内容"> <input type="text" name="" > <input type="text" name=""> <input type="button" name="" value="按钮"> <script type="text/javascript"> /* 焦点 : 使浏览器能够区分用户输入的对象,当一个元素有焦点的时候,那么他就可以接收用户的输入 我们可以通过一些方式给元素设置焦点 1.点击 2.tab键 3.js 通过焦点方法来设置 不是所有元素都能够接收焦点的.能够响应用户操作的元素才有焦点 */ var oInput=document.getElementsByTagName('input')[0]; var oInput1=document.getElementsByTagName('input')[1]; //onfoucs 当元素获取到焦点的时候触发 oInput.onfocus=function (){ if (this.placeholder=='请输入内容') { this.placeholder=''; } } //onblur 当元素失去焦点的时候触发 oInput.onblur=function (){ if (this.value=='') { this.placeholder='请输入内容'; } } </script> </body> </html>

焦点方法

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>焦点方法</title> </head> <body> <input type="text" name=""> <input type="button" name="" value="搜索"> <input type="text" name=""> <input type="button" name="" value="全选"> <div>aaaaaaaaaaaaaa</div> <script type="text/javascript"> var oInput1=document.getElementsByTagName('input')[0]; var oInput2=document.getElementsByTagName('input')[2]; var oBtn=document.getElementsByTagName('input')[3]; /* obj.focus() 给指定元素设置焦点 obj.blur() 取消元素的焦点 obj.select() 选择指定元素的文本内容 能操作的都是可交互性的元素 */ oInput1.focus();//打开页面,oInput1就获得焦点 oBtn.onclick=function (){ oInput2.select(); } </script> </body> </html>
转载请注明原文地址: https://www.6miu.com/read-67601.html

最新回复(0)