집 > 기사 > 웹 프론트엔드 > jquery 페이지 포커스의 동적 사용

jquery 페이지 포커스의 동적 사용

php中世界最好的语言원래의: 2018-04-26 14:05:191624검색

이번에는 jquery 페이지 포커스를 동적으로 사용할 때의 주의사항에 대해 알려드리겠습니다. 실제 사례를 살펴보겠습니다.

사용자가 텍스트를 입력할 때 입력 중인 텍스트 상자를 강조 표시할 수 있다면 더 사용자 친화적일 것입니다. 이를 위해 jQuery를 사용하겠습니다.
구현 원칙:
문서가 로드(준비)된 후 입력의 초점 및 흐림 이벤트를 추가하고 스타일을 추가 및 삭제합니다. 코드 예:

<html> 
<head>
<title>焦点</title> 
<style type="text/css">
.redBack{}{ 
color:white; 
background:red; 
border:2px solid black; 
} 
</style> 
<script language="javascript" src="jquery-1.1.4.js" type="text/javascript"></script> 
<script language="javascript"> 
$(document).ready(function(){ 
$(&#39;input&#39;).focus(function(){ 
$(this).addClass(&#39;redBack&#39;); 
//alert("hello"); 
}); 
$(&#39;input&#39;).blur(function(){ 
$(this).removeClass(&#39;redBack&#39;); 
}); 
}); 
</script> 
</head> 
<body> 
<input type="text" value="hello,shanzhu" id="myText"> 
<input type="text" value="hello,shanzhu" id="myText2"> 
<input type="text" value="hello,shanzhu" id="myText3"> 
<input type="text" value="hello,shanzhu" id="myText4"> 
<input type="text" value="hello,shanzhu" id="myText5"> 
<input type="text" value="hello,shanzhu" id="myText6"> 
</body> 
</html>

테스트 요구 사항에 따라 경고 후 커서는 지정된 위치에 위치해야 합니다. 확인해 보니 focus 속성을 쉽게 얻을 수 있다는 것을 알았습니다.

alert("姓名不能为空！"); 
//由id定位到需要的焦点 
$("#name").focus();

즉, 프롬프트가 출력된 후 입력 항목으로 포커스가 돌아갑니다. 마찬가지로 해당 스타일도 추가할 수 있습니다. 입력되는 텍스트 상자를 강조 표시할 수 있다면 더 사용자 친화적일 것입니다. 이를 달성하기 위해 jQuery를 사용할 것입니다.

문서가 로드(준비)된 후 입력의 포커스 및 흐림 이벤트를 추가하고 스타일을 추가 및 삭제합니다.

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!