Hướng dẫn dùng focus() trong jQuery

0 6

Phương thức focus() được sử dụng như thế nào trong jQuery? Nếu đó là câu hỏi bạn đang quan tâm thì hãy đọc bài này nhé.

focus () là một phương thức sẵn có trong jQuery, được sử dụng để tập trung vào một phần tử. Phần tử được tập trung bằng cách nhấp chuột hoặc bằng nút điều hướng.

Cú pháp:

$(selector).focus(function)

Giải thích:

- Advertisement -

  • selector: phần tử được chọn
  • function: Hành động khi bạn chọn tác động vào selector trên bằng cách click chuột hay qua nút bấm hoặc phương thức khác.

Ví dụ 1:

selector được tập trung thông qua việc bạn chọn phần tử đó bằng click chuột

<html> 

<head> 
	<style> 
		span { 
			display: none; 
		} 
		body { 
            align:center; 
        } 
		
	</style> 
	<script src="https://code.jquery.com/jquery-3.3.1.min.js"> 
	</script> 
</head> 

<body> 
	<h1 style="align:center;">Ví dụ về Focus trong jQuery</h1>
	<p style="align:center;">Click vào ô nhập dữ liệu bên dưới để cảm nhận phương thức focus nhé</p>
	<div id="example">
		<!-- this paragraph element get focused -->
		<p><input type="text"> <span>focused</span></p>
		<p><input type="password"> <span>focused</span></p>
	</div>
	<!-- jQuery cdee to show working of this method -->
	<script>
	$( "input" ).focus(function() {
	  $( this ).next( "span" ).css( "display", "inline" ).fadeOut( 1000 );
	});
	</script>

</body> 

</html> 
focus () trong jQuery
Trước khi chọn
focus () trong jQuery
Sau khi chọn

Ví dụ 2:

Phần tử được tập trung ngay sau khi bạn tải trang thành công

<html> 

<head> 
	<style> 
		span { 
			display: none; 
		} 
		body { 
            align:center; 
        } 
		
	</style> 
	<script src="https://code.jquery.com/jquery-3.3.1.min.js"> 
	</script> 
</head> 

<body> 
	<h1 style="align:center;">Ví dụ về Focus trong jQuery</h1>
	<p style="align:center;">Click vào ô nhập dữ liệu bên dưới để cảm nhận phương thức focus nhé</p>
	<div id="example">
		<!-- this paragraph element get focused -->
		<p><input id="focus" type="text"> <span>focused</span></p>
		<p><input type="password"> <span>focused</span></p>
	</div>
	<!-- jQuery cdee to show working of this method -->
	<script>
	$( "#focus" ).focus();
	</script>

</body> 

</html> 

Đây là 2 ví dụ cơ bản về cách dùng focus () của jQuery. Nếu bạn thấy bài này hữu ích và đã giúp bạn một chút nho nhỏ trên con đường tìm hiểu jQuery thì hãy bấm nút share nhé.

  • Bài viết này có hữu ích không?
  •    không
Loading...

Bình luận
Đang tải...