zoukankan      html  css  js  c++  java
  • js中表单的聚焦失焦事件

    焦点事件:
      不是所有元素都有焦点事件,只有可交互性的元素才有,比如表单元素,a标签。页面中只能有一个元素有焦点,一个聚焦,另一个就失焦,默认在document。

    例子结构如下:  

      <form>
        <input type="text" name="txt1" id="txt" />
        <input type="button" name="btn" value="点击" />
      </form>

    js操作如下:

      1.form.txt1.focus();    // 让元素获得焦点,该方法不会触发onfocus()事件。

      2.form.txt1.onfocus=function(){console.log(1);}  //  元素获得焦点时会触发该事件

      3.form.txt1.onblur=function(){console.log(2);}  //元素失去焦点时触发该事件

      4.form.btn.onclick=function(){ form.txt1.select(); }  //选中输入框中的所有文字

      5.form.btn.onclick=function(){ form.txt1.setSelectionRange(2,5) ; form.txt1.focus(); } / / setSelectionRange需要配合着focus()使用才看得到效果,其中setSelectionRange的结束位置不包含在内,setSelectionRange(start,end)包含两个参数,一个是start:起始位置;一个是end:结束位置。

      默认情况下,输入框中的文字被选中的文字颜色是蓝色,如果想要改变背景颜色,可以使用 #txt::selection{ background: pink; }来改变



  • 相关阅读:
    二分图模板(洛谷P3386)
    2013提高组复赛Day1
    2014Noip提高组复赛Day2题解
    Noip2016Day2T2 蚯蚓
    poj1655 Balancing Act
    codevs1919创世纪
    bzoj1040[ZJOI2008]骑士
    codevs1521 华丽的吊灯
    【20200414】ZumaV3-算法与数据结构课程作业
    【20171111】 Codevs 1214 线段覆盖
  • 原文地址:https://www.cnblogs.com/AngliaXu/p/7147527.html
Copyright © 2011-2022 走看看