jQuery로 포커스를 입력 취소하고 흐림 효과를 반환

Question

거의 작동합니다. 그러나 원본 텍스트 값이 아니라 "defaulttext"필드를 그대로두면됩니다. defaultText 내에서 변수를 가장 효율적으로 에코하는 방법을 모릅니다.

 
$(function() { 
    var defaultText = $(this).val(); 
    $('input[type=text]').focus(function() { 
     $(this).val(''); 
     }); 
    $('input[type=text]').blur(function() { 
     $(this).val('defaultText'); 
     echo 
     }); 
}); 

Answer 1

Simpl 쓰기 : 변수가없는 다른 사람은 $(this).val(defaultText):입니다.

Answer 2

변수 defaultText을 참조하고 있지 않습니다. 따옴표로 묶여 있기 때문에 문자열을 전달하고 있습니다.

$(function() { 
    var defaultText = $('input[type=text]').val(); 
    $('input[type=text]').focus(function() { 
     $(this).val(''); 
     }); 
    $('input[type=text]').blur(function() { 
     $(this).val(defaultText); // fixed! 
     }); 
}); 

Answer 3

설정 메소드 (val)의 defaultText 변수 주변에있는 ''표시를 제거해야합니다.

$(function() { 
    var defaultText = ''; 
    $('input[type=text]').focus(function() { 
     defaultText = $(this).val(); 
     $(this).val(''); 
    }); 
    $('input[type=text]').blur(function() { 
     $(this).val(defaultText); // NB removed the ' ' marks 
     //echo // What are you trying to echo? 
    }); 
}); 

Answer 4

$(function() { 
    var input = $('input[type=text]'); 

    input.focus(function() { 
     $(this).val(''); 
    }).blur(function() { 
     var el = $(this); 

     /* use the elements title attribute to store the 
      default text - or the new HTML5 standard of using 
      the 'data-' prefix i.e.: data-default="some default" */ 
     if(el.val() == '') 
      el.val(el.attr('title')); 
    }); 
}); 

---

의 HTE의 라인을 따라

는

시도 뭔가 업데이트

브라우저가 점진적으로 "힌트"를 표시 할 수있는 기능을 제공하는 placeholder 속성을 구현하는 사용자.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input#attr-placeholder

Answer 5

당신의 방화범이 시도 :

$(function() { console.log($(this)) }); 

당신은

var defaultText = $(this).val(); 

당신이 원하는 것을 아마 것을 발견 할 것이다. 입력에 대한 초기 값은 기본 텍스트 인 경우

, 이런 식을 구하십시오이 페이지에 하나의 입력 텍스트가있는 경우에만 제대로 작동합니다

var defaultText = $('input[type=text]').val() 

는 알고 있어야합니다.

또한에 따옴표를 제거 :

$(this).val('defaultText'); 

Answer 6

사용 HTML5는 각 입력 태그에 자리 속성, 예를 들면 :

<input type="text" value="original text value" placeholder="default value" /> 

Answer 7

이 솔루션은 jQuery를 요구한다!

는 그래서 같은 유틸 모듈에서이 기능을 싸서 다음 HTML에서

var utils = (function() { 
    var utils = {}; 
    //some other properties... 
    utils.setupAutoclearInputs = function() { 
     $('.input-autoclear').each(function() { 
      $(this).data('default', $(this).val()).addClass('gray'); 
     }).focus(function(e) { 
      if (!($(this).val() !== $(this).data('default'))) { 
       $(this).removeClass('gray').addClass('black').data('modified', true).val(''); 
      } 
     }).blur(function(e) { 
      if (!($(this).val() !== $(this).data('default')) || $(this).val() === '') { 
       $(this).removeClass('black').addClass('gray').val($(this).data('default')); 
      } 
     }); 
    } 
    //some other methods... 
    return utils; 
}()); 

:

추가 : class="input-autoclear" 당신이 포함하려는 각 입력에.

설정 기본값 : <input ... value="defaultValue" ... >

은 회색과 검은 색 텍스트 또는 당신이 무엇을 원하는 일부 CSS 클래스를 만듭니다.

개인적으로 나는 .gray { ... }과 .black { ... }을 사용하고 있지만 더 나은 이름을 원할 수 있습니다. 마지막으로

:

화재를 사용하여 유틸 모듈 방법 :

$(document).ready(function() { 
    ... 
    utils.setupAutoclearInputs(); 
    ... 
} 

모듈의 코드가 document.ready 호출 외부에서 살고 있는지 확인하고 당신은 아마의 글로벌 범위에서 원하는됩니다 신청.

올바른 자바 스크립트 모듈 작성에 대한 자세한 내용은 article을 방문하십시오.

Answer 8

var q = $('#q'); 
q.focus(function() { 
    if ($(this).attr('data-default') == $(this).val()) { 
     $(this).val(''); 
    } 
}).blur(function() { 
    if($(this).val() == '') { 
     $(this).val($(this).attr('data-default')); 
    } 
}); 


<input type="text" name="q" id="q" data-default="Search..." value="Search..."/> 

Answer 9

.data() 함수를 사용하여 기본 텍스트를 저장합니다. 추가 마크 업이 필요 없습니다.

$('input').focus(function() { 
    if (!$(this).data("DefaultText")) $(this).data("DefaultText", $(this).val()); 
    if ($(this).val() != "" && $(this).val() == $(this).data("DefaultText")) $(this).val(""); 
}).blur(function(){ 
    if ($(this).val() == "") $(this).val($(this).data("DefaultText")); 
}); 

Answer 10

이가 작동

$('.myclass').each(function() { 
    var default_value = this.value; 
    $(this).css('color', '#666'); // this could be in the style sheet instead 
    $(this).focus(function() { 
     if(this.value == default_value) { 
      this.value = ''; 
      $(this).css('color', '#333'); 
     } 
    }); 
    $(this).blur(function() { 
     if(this.value == '') { 
      $(this).css('color', '#666'); 
      this.value = default_value; 
     } 
    }); 
}); 
<input type="text" class="myclass" size="30" value="type here" /> 

Answer 11

! 나는 그것을 직접 사용한다 :

/* Forminputs löschen und wiederherstellen */ 
jQuery(function() { 
    var input = jQuery('#userForm input[type=text], #userForm textarea'); 

    input.focus(function() { 

     jQuery(this).attr('data-default', jQuery(this).val()); 
     jQuery(this).val(''); 

    }).blur(function() { 
     var el = jQuery(this); 

     if (el.val() == '') 
      el.val(el.attr('data-default')); 
    }); 
}); 

Answer 12

나는이 코드를 조금 재미있게 만들었다.

$(document).ready(function() { 
    var defaultText = ''; 
    $('.input-focus-clear').focus(function() { 
     defaultText = $(this).val(); 
     $(this).val(''); 
    }); 
    $('.input-focus-clear').blur(function() { 
     var newText = $(this).val(); 
     if (newText.length < 1) { 
      $(this).val(defaultText); 
     } 
    }); 
});