2011-08-24 2 views
27

html5는 input[type=text] 요소의 자리 표시 자 속성을 지원하지만 호환되지 않는 브라우저를 처리해야합니다. 자리 표시자를위한 1,000 개의 플러그인이 있지만 1001 번째를 만들고 싶습니다.jquery : 맞춤 속성 값 가져 오기

input[placeholder] 요소에서 핸들을 가져올 수 있지만 자리 표시 자 특성 값을 얻으려고하면 정의되지 않은 값이 반환됩니다 ($("input[placeholder]").attr("placeholder")).

jquery 1.6.2를 사용하고 있습니다.

여기는 jsfiddle입니다. 테스트 용으로 html5와 호환되는 브라우저에서 작동하도록 코드를 수정했습니다.

HTML

<input type="text" name="email" size="10" placeholder="EMAIL ADDRESS"> 

JQuery와 일체의 도움을

function SupportsInputPlaceholder() { 
    var i = document.createElement("input"); 
    return "placeholder" in i; 
} 

$(document).ready(function(){ 
    if(!SupportsInputPlaceholder()) { 
     //set initial value to placeholder attribute 
     $("input[placeholder]").val($("input[placeholder]").attr("placeholder")); 

     //create event handlers for focus and blur 
     $("input[placeholder]").focus(function() { 
      if($(this).val() == $(this).attr("placeholder")) { 
       $(this).val(""); 
      } 
     }).blur(function() { 
      if($(this).val() == "") { 
       $(this).val($(this).attr("placeholder")); 
      } 
     }); 
    } 
}); 

감사합니다, val 등 (함수를 호출하는 경우를 제외하고

답변

38

당신은 여기에 반복의 형태를 필요 B를,)는 첫 번째 요소에서만 작동합니다.

$("input[placeholder]").val($("input[placeholder]").attr("placeholder")); 

은 다음과 같아야합니다

$("input[placeholder]").each(function() { 
    $(this).val($(this).attr("placeholder")); 
}); 

또는

$("input[placeholder]").val(function() { 
    return $(this).attr("placeholder"); 
}); 
+2

않을까요'$ ("입력 [자리 표시 자] ") .val (function() {return $ (this) .attr ("placeholder "); }); –

+0

데니스에게 감사드립니다. 각각에 중단 점을 설정하면 해당 함수를 입력하지 않는 것으로 나타납니다. 선택기와 일치하는 요소를 찾지 못하는 것입니다. 그러나 $ ("input [placeholder]"). val()에 시계를 넣으면 ""표시가 나타나고 요소에 초기 값을 지정하면 값이 표시됩니다. – bflemi3

+0

@ 리차드 그래, 좀 나아 졌어. 아마도 너무 많은 차이를 생각하지 않았을 것입니다. bflemi3, 어떤 브라우저를 사용하고 있습니까? 귀하의 코드는 크롬과 IE7에서 작동합니다 – Dennis

1
또한 온 클릭 이벤트와 기능을 전달하여이 작업을 수행 할 수 있습니다

<a onlick="getColor(this);" color="red"> 

<script type="text/javascript"> 

function getColor(el) 
{ 
    color = $(el).attr('color'); 
    alert(color); 
} 

</script>