jquery로 자리 표시 자 바꾸기

Question

jquery 만 사용하는 모든 브라우저에서 작동하도록 placeholder 문제에 대한 해결책을 만들고 있습니다. 지금까지 좋은 작업

그 ... 이 내가 완벽하게 초점 밖으로 부분까지 작업

var formId = ["Name", "E-mail", "Subject", "Message"]; 
$.each(formId, function(i) { 
    $("input, textarea").focus(function() { 
     if ($(this).val() === formId[i]) 
      $(this).val(""); 
    }).focusout(function() { 
     if ($(this).val() === "") 
      $(this).val(formId[i]); 
    }); 
}); 

그것을 얼마나 멀리 왔는지입니다. 내가 입력 필드에 초점을 맞출 때, 모든 입력 필드에 Name으로 값을 다시 채 웁니다. 다른 솔루션을 사용하여 내 방법을 시도해 보았습니다. 그러나 이것은 가까운 것입니다. 어떤 아이디어라도 들었습니까?

Answer 1

이 문제를 해결하는 가장 좋은 방법은 아닌 것 같습니다. 이전에 블로그에서 다음과 같은 솔루션을 보았습니다. 당신은 입력에 자리 표시 자 속성을 추가, 그래서 그들은 최신 브라우저에서 작동합니다, 당신은 [placeholder] 같은 자리 표시 자 속성을 입력 할 jQuery를 추가

$('[placeholder]').focus(function() { 
    var input = $(this); 
    if (input.val() == input.attr('placeholder')) { 
    input.val(''); 
    input.removeClass('placeholder'); 
    } 
}).blur(function() { 
    var input = $(this); 
    if (input.val() == '' || input.val() == input.attr('placeholder')) { 
    input.addClass('placeholder'); 
    input.val(input.attr('placeholder')); 
    } 
}).blur(); 

$('[placeholder]').parents('form').submit(function() { 
    $(this).find('[placeholder]').each(function() { 
    var input = $(this); 
    if (input.val() == input.attr('placeholder')) { 
     input.val(''); 
    } 
    }) 
}); 

내가 찾을 수있는 블로그를 지금하는 인 부끄러움, 왜냐하면이 코드는 그 사이트에서 완전히 복사되고 위대한 크로스 브라우저에서 작동한다고 믿기 때문입니다.

이 작동하는 방법이 더 좋은 방법입니다 이유 : 모든 입력 및 텍스트 영역 요소에 핸들러를 넣는 대신

, 당신은 쉽게 사람들이 그들에 핸들러가해야 할 정확하게 필터링 할 수 있습니다 다음을 가지고 그 사람들을 자리 표시 자 특성.

.submit() 처리기는 기본 텍스트가 값으로 게시되지 않도록합니다. 당신은 매우 유사하다 여러 초점 핸들러를 호출하는 각 기능을 사용하고

:

어쩌면 내가 느끼는 무엇을 이야기해야 당신의 코드에 문제가 있습니다. 당신은 아마 각 기능을 필요로하지 않습니다. $ ('input, textarea'). focus()는 각 입력에 핸들러를 추가하기 때문에 사용할 수 있습니다. 그런 다음 $.inArray($(this).val(),formId)인지 확인할 수 있습니다. inArray()에 대한 문서

Answer 2

대신 다음, 적절한 값으로 입력/텍스트 영역 HTML 태그의 속성 데이터 자리 표시자를 추가에 대한 var formId을 잊지는 :

$("input, textarea").on({ 
    focus : function() { 
     var $t=$(this); 
     if ($t.val() ===$t.data("placeholder")) 
     $t.val(""); 
    }, 
    blur : function() { 
     var $t=$(this); 
     if ($t.val() === "") 
     $t.val($t.data("placeholder")); 
    } 
});