zoukankan      html  css  js  c++  java
  • [ZT]文本框(input)获取焦点(onfocus)时样式改变的实现方法

    摘要: 许多重视用户体验的设计师都希望给文本框(input)加上获取焦点或者鼠标悬停时的样式切换效果。其实很简单,我们只需要获取页面上的文本框,加上onfocus事件或者其他对应的事件即可。本文介绍了如何在获取焦点时切换样式,明白原理后,实现其他效果就很简单了。

    许多重视用户体验的设计师都希望给文本框(input)加上获取焦点或者鼠标悬停时的样式切换效果。其实很简单,我们只需要获取页面上的文本框,加上onfocus事件或者其他对应的事件即可。本文介绍了如何在获取焦点时切换样式,明白原理后,实现其他效果就很简单了。


    --------------------------------------------------------------
    点此浏览示例文件
    --------------------------------------------------------------


    Javascript:
    1.  
    2. <script type="text/javascript">
    3. // 说明:文本框(input)获取焦点(onfocus)时样式改变的实现方法
    4. // 整理:http://www.CodeBit.cn
    5.  
    6. // focusClass : 获取焦点时的样式
    7. // normalClass : 正常状态下的样式
    8. function focusInput(focusClass, normalClass) {
    9. var elements = document.getElementsByTagName("input");
    10. for (var i=0; i < elements.length; i++) {
    11. if (elements[i].type != "button" && elements[i].type != "submit" && elements[i].type != "reset") {
    12. elements[i].onfocus = function() { this.className = focusClass; };
    13. elements[i].onblur = function() { this.className = normalClass||''; };
    14. }
    15. }
    16. }
    17. </script>
    18.  



    测试代码:
    HTML:
    1.  
    2. <style type="text/css">
    3. .normalInput {
    4. border:1px solid #ccc;
    5. }
    6. .focusInput {
    7. border:1px solid #FFD42C;
    8. }
    9. </style>
    10.  
    11. <script type="text/javascript">
    12. window.onload = function () {
    13. focusInput('focusInput', 'normalInput');
    14. }
    15. </script>
    16.  
    17. 文本框:<input type="text" class="normalInput" />
    18.  

  • 相关阅读:
    Word中封面的问题
    UML问题
    《十八岁的天空》有感
    SPSS相关和回归分析
    WinForm自定义验证控件
    .NET常用的扩展方法整理
    C# 对JS编码/解码进行转换
    Jquery AJAX 调用WebService服务
    多条件动态LINQ 组合查询
    Visual studio 2008 的语法高亮插件 WordLight
  • 原文地址:https://www.cnblogs.com/godwar/p/1347145.html
Copyright © 2011-2022 走看看