변경 테두리/색상 onfocus 및

Question

나는

<input type="text"> 

에 초점을 가진 후 다른 곳을 클릭 한 후 기본 색으로 다시 변경 한 후 사업부의 경계 바닥의 색상을 변경 스크립트를 만들기 위해 노력했다.

이

제가 시도 무엇인가

CSS는 :

.div1 {border-bottom:1px solid #ccc;} 

Javacript :

function inputFocus(){ $(".div1").css("border-bottom","1px solid #ffba00"); }; 

HTML :

<input type="text" onFocus="inputFocus();"> 

첫번째 부분 (초점 색상 변경) 잘 작동합니다. r 다른 곳을 클릭 한 후 (입력에 집중하지 않음) CSS 파일에 설정된대로 정상 스타일로 다시 바뀌지 않습니다.

어떤 아이디어가 잘못 되었나요?

Answer 1

나는 좋을 것 :

$('input').focus(
    function(){ 
     $(this).css('border-bottom','1px solid #000'); 
    }).blur(
     function(){ 
      $(this).css('border-bottom','1px solid #ccc'); 
     });​ 

JS Fiddle demo합니다.

당신이 CSS 의무가 있다면 비록 :

input:focus, 
input:active { 
    border-bottom: 1px solid #000; 
} 

JS Fiddle demo.

Answer 2

이렇게하려면 JavaScript를 사용하지 않아야합니다. CSS에는 :focus 셀렉터가 있는데이 셀렉터가 훨씬 적합합니다.

.div1 {border-bottom:1px solid #ccc;} 
.div1:focus {border-bottom:1px solid #ffba00;} 

Answer 3

당신은 당신의 변화 당신은 onBlur 이벤트를 사용할 필요가

Answer 4

$('input').focus(function(){ 
    $(this).css('border-bottom-color','#ffba00'); 
}); 
$('input').blur(function(){ 
    $(this).css('border-bottom-color','#ccc'); 
}); 

Answer 5

에게 롤백 및 onblur 이벤트에 함수를 추가 놈이야.

자바 스크립트 :

function inputBlur() { 
    $(".div1").css("border-bottom","1px solid #ccc"); 
} 

HTML :

<input type="text" class="div1" onFocus="inputFocus();" onBlur="inputBlur();"> 

그러나

, 더 나은 옵션은 클래스 토글을 사용하는 것입니다.

HTML :

<input type="text" class="myinput"> 

CSS :

.myinput { 
    border-bottom:1px solid #ccc; 
} 

.myinput.active { 
    border-bottom:1px solid #ffba00; 
} 

자바 스크립트 :

$(function() { 
    $(".myinput").on("focus", function() { 
     $(this).addClass("active"); 
    }).on("blur", function() { 
     $(this).removeClass("active"); 
    }); 
}); 

Answer 6

HTML에서 함수를 호출하는 것은 당신이 시도 할 수 있습니다 대신이 :

.border {border-bottom:1px solid #ccc;} 

$("input[type='text']").focus(function(){ 
    $(this).addClass("border") 
}) 

$("input[type='text']").blur(function(){ 
    $(this).removeClass("border"); 
}) 

,

Answer 7

변경된 CSS가 컨트롤에서 포커스를 잃은 후에 되돌아 가지 않기 때문에 이런 현상이 발생합니다.

이 도움이 될 : 영업의 원래 솔루션으로

<input type="text" onFocus="inputFocus();" onblur="inputBlur();"> 

function inputFocus(){ $(".div1").removeAttr('style'); };