Jquery 포커스 문제

-1

가능한 경우 일반 함수를 사용하려는 다음 코드가 있습니다. 꼭 필요한 경우 색상을 변경해야합니다. 그 뒤에 색상 그라디언트가있어서 구석에 투명한 PNG를 사용해야합니다. 레이아웃 폭은 이벤트 핸들러를 설정하기 전에 준비를 그래서 정말 너무 much.`Jquery 포커스 문제

<div class="inputBody"> 
<div class="inputtop"><span class="inputtoptext">Username</span></div> 
<div><input type="text" size="25"></div>` 
</div> 

<script> 
$('input').focus(function() { 
    $(this).addClass("yellowinput"); 

}); 

$('input').blur(function() { 
    $(this).removeClass("yellowinput"); 
}); 
</script>

출처

2012-03-14 David Nuckols

무엇이 문제입니까? 작동하지 않습니까? 어떤 오류가 있습니까? – ManseUK

제발 ** 당신이 당신의 질문을 읽는 다른 누군가라고 상상해보십시오. ** ** ** ** ** ** 그 사람이 무엇에 대해 물어 보는 지 알 수 있습니까? – gdoron

배경을 입력 위에있는 텍스트로 변경하려고합니다. 나는 다시 형식을 정하고 더 쉽게 읽을 수 있도록했습니다. 페이지를로드 할 때 "inputtoptext"파란색 배경이있었습니다. 텍스트 입력 상자를 클릭하면 노란색으로 변경하고 싶습니다. –

이와 같은 단위로 작동하는 코드 하나를 만들 수 있습니다. 모든 관련 id 값이 클래스 이름으로 변경되고 전체 조각이 컨테이너에 저장됩니다. 이를 통해이 입력 컨테이너와 연관된 객체를 이벤트를 발생시킨 객체를 기준으로 일반적인 방법으로 찾을 수 있습니다.

<div class="inputContainer"> 
    <span class="orderlabel-left"> 
     <img src="resources/images/labelbackground-left.png" class="leftsidecorneruser"> 
    </span> 
    <span class="orderlabel orderlabelcommon">Username</span> 
    <span class="orderlabel-right"> 
     <img src="resources/images/labelbackground-right.png" class="rightsidecorneruser"> 
    </span> 
    <div> 
     <input type="text" value="" name="" class="orderinput" size="40" tabindex="1" id="user"> 
    </div> 
</div> 


$('input').focus(function() { 
    var container = $(this).closest(".inputContainer"); 
    container.find(".leftsidecorneruser").attr("src", "resources/images/yellowleft.png"); 
    container.find(".rightsidecorneruser").attr("src", "resources/images/yellowright.png"); 
    container.find(".orderlabelcommon").removeClass("orderlabel").addClass("yellowbackground"); 
}); 
$('input').blur(function() { 
    var container = $(this).closest(".inputContainer"); 
    container.find(".leftsidecorneruser").attr("src", "resources/images/labelbackground-left.png"); 
    container.find(".rightsidecorneruser").attr("src", "resources/images/labelbackground-right.png"); 
    container.find(".orderlabelcommon").addClass("orderlabel").removeClass("yellowbackground"); 
});

참고로, 다른 접근 방식이 훨씬 적은 코드와 함께 할 수와 같은 대부분의 CSS 규칙을 사용하여 :

$('input').focus(function() { 
    $(this).closest("inputContainer").addClass("hasFocus"); 
}); 

$('input').blur(function() { 
    $(this).closest("inputContainer").removeClass("hasFocus"); 
});

, 당신은 단지 객체 여부에 모든 CSS 규칙 파견 할 것 상위 CSS 클래스 .hasFocus이 있는지 여부 이미지는 배경 이미지로 변경해야하지만 CSS로도 처리 할 수 있습니다.

출처

2012-03-14 21:40:52 jfriend00

그게 효과가 있어요. 전에는 가장 가까운 기능을 사용한 적이 없었습니다. –

@DavidNuckols - 여러분이 여기 stackoverflow에서 새로 온 것처럼, 질문을 할 때 커뮤니티에 다시 기여하는 방식은 왼쪽에있는 체크 표시를 클릭하여 어떤 대답이 가장 잘 답변되었는지 커뮤니티에 알리는 것입니다. 대답은? 그것은 또한 당신에게 당신이 다른 특권을 가질 수있게 해주는 평판 포인트를 얻을 것입니다. – jfriend00

-1

당신은 정말 DOM 대기해야하는 HTML을 변경할 수 없습니다 액체 할 필요가 :

<script type="text/javascript"> 
    $(document).ready(function() { 
     // your code here 
    }); 
</script>

이 방법이 문제를 해결할 수 있는지는 잘 모르겠지만 (다른 사람들이 지적했듯이, 질문에서 분명하지 않음), 이는 좋은 습관입니다. 또한 script 태그를 <head> 태그 사이에 넣어야합니다.

출처

2012-03-14 21:40:27 Christoffer

그의 스크립트가 '몸'의 맨 아래에있는 것처럼 보이므로 문제가되지 않습니다. – gdoron

javascript 코드가 실제로 파일의 DOM 요소 뒤에있는 경우에는 필요하지 않습니다. – jfriend00

이렇게하는 것이 일반적인 관례 일 뿐이라는 의견을 편집했습니다. – Christoffer

Jquery 포커스 문제

답변

관련 문제