2. 软件开发
    3. 关于焦点事件onfocus&onblur，和textinnerHTML

    关于焦点事件onfocus&onblur，和textinnerHTML

    xiaoxiao2024-01-21  150
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="jquery-1.12.3.js" charset="utf-8"></script> </head> <body> <input type="text" name="name" placeholder="请输入用户名"></br> <input type="password" name="name" placeholder="请输入密码"></br> <input type="submit" name="name" value="登录"> </body> <script type="text/javascript"> //是用焦点和失去焦点事件处理 $('input').on("focus",function(){ //接受原有的placeholder的value； var val = this.placeholder; //获取焦点让placeholder为空； this.placeholder = ""; //获取焦点才能失去焦点，所以失去焦点函写在获取焦点里面 $('input').on('blur',function(){ //失去焦点后，placeholder变回原有的值 this.placeholder = val; }) }); </script> </html>

    上面为焦点事件

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> #div0{ width:700px; height:500px; border:3px #000000 solid;} #div1{ width:300px; height:200px; float:left; background-color:#CCCCCC;} #div2{ width:300px; height:200px; float:right; background-color:#F00;} ul,li{ list-style: none; } ul li a{ display: block; background:red; border: 1px solid teal; } </style> <script type="text/javascript"> window.οnlοad=function(){ var oto1=document.getElementById('div1'); var oto2=oto1.getElementsByTagName('li'); var oto3=document.getElementById('div2'); var ul = document.getElementsByTagName('ul')[0]; ul.onclick = function(e){ //事件委托 var text = e.target.text; //把值赋给div2的innerHTML； oto3.innerHTML = text; // 如果想让值内容累加，执行此代码,把上一行的代码注释掉 // oto3.innerHTML += text + "</br>"; } } </script> </head> <body> <div id="div0"> <div id="div1"> <ul> <li><a href="javascript:void(0)">oh my</a></li> <li><a href="javascript:void(0)">2</a></li> <li><a href="javascript:void(0)">3</a></li> <li><a href="javascript:void(0)">4</a></li> <li><a href="javascript:void(0)">5</a></li> </ul> </div> <div id="div2"></div> </div> </body> </html>

    最新回复(0)