Тема: div и onblur
Показать сообщение отдельно
  #6 (permalink)  
Старый 26.09.2012, 18:27
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 17.12.2011
Сообщений: 4,415

моя реализация blur && focus
<!DOCTYPE HTML>
<html>
  <head>
  <style>
    #block {
      width:200px;
      height:200px;
      border:4px solid red;
      display:none;
    
    
    } 
    body {
    
      border:2px solid black;
    
    
    }
    
    </style>
  </head>
  <body >
    <a href='#' id='action' >open/close</a>
    
    <div id='block'>
      wereasrwer
    <input type='text'>
      <div>
       <input type='text'> 
      </div>
    </div>
    
 <div id='inform'></div>

    <script>
      function _(selector) {//функия для удобства написания примера, копипастить не нужно:)
      
      return document.querySelectorAll(selector)[0];
      
      }
      
      
     function Focus_and_Blur(opt){
      
      var elem = opt.elem, focusForElem;
        
       var body = document.body;
        
       elem.setAttribute('tabindex',-1);  
       body.setAttribute('tabindex',-1); 
      
      if (elem.addEventListener){ 
      
      elem.addEventListener('focus' , onFocus,true);
      
      body.addEventListener('focus',onDocumentFocus,true); 
    
      } else {
      
      elem.onfocusin = onFocus;
      body.onfocusin = onDocumentFocus;
    
      }
      
      function onFocus(e) {
      
        
        
        focusForElem = true;
        event.cancelBubble = true;
        opt.focus.call(this,e);
          
      }
      
        function onDocumentFocus (e) {
        
         
          
          if (focusForElem) {
            
             if(parent(e))return;
            
            focusForElem = false;
            opt.blur.call(elem,e)
          }
        }
      
       function parent (e) {
       
         var target = e.target || event.scrElement;
         var parent = target;
         
         while (parent && parent != elem) {
         
          parent = parent.parentNode;
         }
         
        
         return parent == elem;
       
       }
       
       
      };
      
      
      var elem = document.getElementById('block');
      
  
      Focus_and_Blur({
        elem:elem,
        focus:function (e) {
         
          _("#inform").innerHTML = 'focus on '+ this.id;

        },
        blur: function (e) {
         
         _("#inform").innerHTML = 'blur  '+ this.id;
          
           elem.style.display = '';
       
        }
      });
      
      
      _("#action").onclick = function () {
      
        elem.style.display = 'block';
        elem.focus();
      
      
      }
    </script>

  </body>
</html>
__________________
Цитата:
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.
Ответить с цитированием