텍스트 상자 입력 포커스 및 디포커스 스타일 구현 code_javascript 기술

먼저 CSS 의사 클래스를 사용합니다. 포커스를 변경할 수 있습니다.

텍스트 상자의 html 코드는 다음과 같다고 가정합니다.

코드 복사 코드는 다음과 같습니다. 다음:

이름:

비밀번호:

< textarea>

CSS 코드는 다음과 같이 작성됩니다.

input[type="text" ]:focus, input[type="password"]:focus, textarea:focus { border: 1px solid #f00; background: #ccc }
텍스트 상자, 비밀번호 상자와 단락 상자가 각각 나열됩니다. 세 입력 상자에 초점이 맞춰지면 스타일이 표시됩니다. 빨간색 테두리와 회색 배경을 추가합니다.

이제 해결이 그렇게 간단해졌나요? 브라우저(Firefox, Safari, IE7)를 사용하여 테스트하면 모든 것이 정상이지만 IE6은 지원되지 않습니다.

IE6에서도 동일한 아름다운 효과를 얻으려면 jquery만 사용하면 됩니다. 당신을 위해 하나를 만들어보세요.

코드 복사 코드는 다음과 같습니다.

$(document).ready(function( ){

$("input[@type='text'], input[@type='password'], textarea").focus( function(){ $(this).css({배경:"# ccc", border:"1px solid #f00"})} );
});


jquery를 만드는 것은 참 간단하지 않나요? CSS를 작성하는 방식과 비슷한 느낌입니다 !

이것은 초점이 맞지 않는 상태일 뿐이므로 지침을 제공해야 합니다. 이는 저절로 다시 변경되지 않으므로 out-of-를 추가합니다. 집중 상태.

코드 복사 코드는 다음과 같습니다.

$(document).ready(function( ){

$("input[@type='text'], input[@type='password'], textarea").focus(function(){$(this).css({배경:"# ccc", border: "1px solid #f00"})}).blur(function(){$(this).css({배경: “#FFF”, border: “1px solid #ccc”})});
})


디포커싱 후 배경 가장자리는 흰색으로, 테두리는 회색으로 변합니다.

물론 jquery의 addClass 및 RemoveClass를 사용하여 코드를 단순화할 수도 있습니다.

코드 복사 코드

$(document).ready(function(){

$("input[@type='text'], input[@type='password'], textarea").focus (function(){$(this).addClass("focus")}).blur(function(){$(this).removeClass("focus")});
})


먼저 입력 상자에 기본 스타일을 지정합니다. 초점이 맞춰지면 addClass를 사용하여 CSS "focus"를 추가합니다. 초점이 맞지 않으면 RemoveClass를 사용하여 CSS "focus"를 제거합니다.

모두 완료되었습니다!