클릭 전에 실행되는 흐림 효과

두 가지 이벤트가 있습니다. 1) 흐림 및 클릭. 사용자가 input 요소를 비워두면 blur 이벤트는 모든 것을 제거하고 click 이벤트는 대화 상자를 표시합니다.클릭 전에 실행되는 흐림 효과

$(document).on('click','.glyphicon-filter',glyphiconFilterClicked); 
function glyphiconFilterClicked() { 
    debugger; // show dialog box goes here 
} 

$(document).on('blur','input',filterBlurred); 
function filterBlurred() { 
    if ($(this).val() === '') { 
     $(this).closest('tr').find('th').html('&nbsp;'); 
    } 
}

Q : glyphicon 필터 "I didn를 내가 말할 수있는 방법

출처

2014-01-14 Phillip Senn

'모든 것을 제거합니다'는 무엇을 의미합니까? 다시 설정됩니까? – Sekai

해당 행에있는 모든 th 요소는 그 안에있는 html을 바꿀 수없는 공백으로 대체하여 지 웁니다. –

두 이벤트를 연결할 수 없으며 setTimeout (...)를 기다리는 blur 이벤트 핸들러에서 말하면 100ms입니다. 그런 다음 클릭 핸들러에서 setTimeout의 콜백이 양식 필드의 값을 지우기 전에 확인하는 플래그를 true로 설정합니다.

편집 : 당신은에 복사하여 HTML 파일에 붙여 넣기, 저장 한 다음로드 할 수 있어야한다

<!DOCTYPE HTML> 
<html> 
<head> 
    <title>Filter Blur Demo</title> 
</head> 
<body> 
    <table> 
     <tbody> 
      <tr> 
       <th>Apples</th> 
       <td><input type="text"> <button class="glyphicon-filter">Filter...</button> 
        (defaults)</td> 
      </tr> 
      <tr> 
       <th>Oranges</th> 
       <td><input type="text" data-filter-icon-timeout="2000"> <button class="glyphicon-filter">Filter...</button> 
        (custom timeout)</td> 
      </tr> 
      <tr> 
       <th>Bananas</th> 
       <td><input type="text" data-filter-icon-selector="a"> <a href="#" class="glyphicon-filter">Filter...</a> 
        (custom filter icon selector)</td> 
      </tr> 
     </tbody> 
    </table> 
    <ol> 
     <li> 
      <label>Peaches</label> 
      <input type="text" 
       data-filter-icon-container="li" 
       data-filter-icon-timeout="250" 
       data-filter-icon-selector="a" 
       data-filter-cleared-out-selector="label" 
       data-filter-cleared-out-value="n/a"> 
      <a href="#" class="glyphicon-filter">Filter...</a> 
      (everything but the kitchen sink) 
     </li> 
    </ol> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
    <script> 
     function filterBlurred(event) { 
      //console.info("blur"); 
      var input = event.target, 
       filterIconSelector = input.getAttribute("data-filter-icon-selector") || ".glyphicon-filter", 
       containerSelector = input.getAttribute("data-filter-icon-container") || "tr", 
       clearedOutSelector = input.getAttribute("data-filter-cleared-out-selector") || "th", 
       clearedOutValue = input.getAttribute("data-filter-cleared-out-value") || "&nbsp;", 
       timeout   = Number(input.getAttribute("data-filter-timeout")) || 250, 
       $row    = $(input).closest(containerSelector), 
       $icon    = $row.find(filterIconSelector), 
       clearInput = function() { 
        if (!input.value) { 
         if ($icon.attr("data-filter-icon-clicked") !== "yes") { 
          $row.find(clearedOutSelector).html(clearedOutValue); 
         } 

         $icon.attr("data-filter-icon-clicked", ""); 
        } 
       }; 

      setTimeout(clearInput, isNaN(timeout) ? 250 : timeout); 
     } 

     function glyphiconFilterClicked(event) { 
      event.target.setAttribute("data-filter-icon-clicked", "yes"); 
      //console.info("click", event.target); 
      event.preventDefault(); 
      // do other stuff 
     } 

     $(document) 
      .on("blur", "input", filterBlurred) 
      .on("click", ".glyphicon-filter", glyphiconFilterClicked); 

    </script> 
</body> 
</html>

당신이 의도 한대로 내가 일을 생각 일부 작업 코드 ... 브라우저. 그것은 Firefox에서 나를 위해 일하고있다.

이 경우 "플래그"는 icon 요소의 HTML5 data- * 속성입니다. 이것은 매우 커스터마이징 가능하고 재사용 가능하게 만듭니다.

출처

2014-01-14 17:14:44

흠. "DontTaseMeBro"와 같은 플래그를 호출 할 수 있습니다. –

나는 $ .Deferred() 변수를 설정하고 필터 아이콘을 클릭하면 해결할 것이라고 생각한다. 그렇지 않으면 100ms를 기다렸다가 필터 아이콘이 클릭되지 않았다고 가정합니다. –

"사용자가 단지 클래스 = 클릭 때문에 이유 인 경우 입력 흐림 효과, 요소 번째 부모를 버리지 않는다 " 이 질문을 아주 잘 이해하지 못 하겠지만, 여기에 내가 얻은 것은 class = "glyphicon-filter"를 가진 입력이 아닌 다른 입력을 블러하면 요소가 비어 있지 않습니까? 그렇다면 다음과 같이 작성하십시오 :

$(document).on('blur','input.glyphicon-filter',filterBlurred); 
function filterBlurred() { 
    if ($(this).val() === '') { 
     $(this).closest('tr').find('th').html('&nbsp;'); 
    } 
}

출처

2014-01-14 17:13:37 Sekai

클릭 전에 실행되는 흐림 효과

답변

관련 문제