Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk menukar input kepada keadaan baca sahaja dalam jquery

Bagaimana untuk menukar input kepada keadaan baca sahaja dalam jquery

青灯夜游
青灯夜游asal
2022-06-09 17:04:554348semak imbas

Dua kaedah pelaksanaan: 1. Gunakan attr() untuk menambah atribut baca sahaja pada elemen input dan tetapkan nilai atribut kepada "baca sahaja", sintaksnya ialah "$("input").attr(" baca sahaja"," baca sahaja");". 2. Gunakan prop() untuk menambah atribut baca sahaja pada elemen input, dan tetapkan nilai atribut kepada "true", menggunakan sintaks "$("input").prop("readonly",true);".

Bagaimana untuk menukar input kepada keadaan baca sahaja dalam jquery

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi jquery 3.6.0, komputer Dell G3.

Untuk menjadikan input baca sahaja, cuma tambah atribut baca sahaja (baca sahaja) pada elemen input.

Oleh itu, menggunakan jquery untuk menjadikan input baca sahaja ditukar kepada menggunakan jquery untuk menambah atribut baca sahaja pada elemen input.

mempunyai dua kaedah pelaksanaan berikut:

  • Gunakan attr()

  • Gunakan prop()

1. Gunakan attr() untuk menetapkan status baca sahaja elemen input

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="./js/jquery-3.6.0.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$("button").click(function() {
					$("input").attr("readonly","readonly");
				});
			});
		</script>
		<style type="text/css">
			.intro {
				font-size: 120%;
				color: red;
			}
		</style>
	</head>

	<body>
		<input type="text" value="hello"/><br /><br />

		<button>给input添加只读属性</button>
	</body>
</html>

Bagaimana untuk menukar input kepada keadaan baca sahaja dalam jquery

2. Gunakan prop () Tetapkan status baca sahaja elemen input

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="./js/jquery-3.6.0.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$("button").click(function() {
					$("input").prop("readonly",true);
				});
			});
		</script>
		<style type="text/css">
			.intro {
				font-size: 120%;
				color: red;
			}
		</style>
	</head>

	<body>
		<input type="text" value="hello"/><br /><br />

		<button>给input添加只读属性</button>
	</body>
</html>

Bagaimana untuk menukar input kepada keadaan baca sahaja dalam jquery

Penjelasan:

Malah, kaedah prop() dan kaedah attr() adalah serupa kerana ia digunakan untuk mendapatkan atau menetapkan atribut HTML sesuatu elemen, tetapi terdapat perbezaan penting antara kedua-duanya.

Syor rasmi jQuery: Untuk atribut dengan dua nilai true dan false, seperti ditandai, dipilih dan dilumpuhkan, adalah disyorkan untuk menggunakan kaedah prop() untuk beroperasi, manakala untuk atribut lain adalah disyorkan untuk menggunakan kaedah attr() untuk beroperasi.

[Pembelajaran yang disyorkan: tutorial video jQuery, video bahagian hadapan web]

Atas ialah kandungan terperinci Bagaimana untuk menukar input kepada keadaan baca sahaja dalam jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn