Categories
PHP

Membatasi Jumlah karakter Pada aplikasi Menggunakan JavaScript

membatasi jumlah karakter pada aplikasi

Kali ini kami akan share bagaimana membuat aplikasi sederhana yaitu membatasi jumlah karakter pada aplikasi menggunakan javascript. Script ini akan membatasi karakter yang dapat dimasukkan. Ini dapat membantu Anda mengurangi data yang telah ditransfer dalam database, untuk mencegah penyimpanan database menjadi penuh. 

Langsung saja mari kita masuk kedalam pembahasan inti.

Buat file dengan nama index.html file ini berfungsi sebagai form utama dalam aplikasi.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
</head>
<body>
	<nav class="navbar navbar-default">
		<div class="container-fluid">
			<a class="navbar-brand" href="https://jasawebsite.ooo">Jasawebsite</a>
		</div>
	</nav>
	<div class="col-md-3"></div>
	<div class="col-md-6 well">
		<h3 class="text-primary">JavaScript - Membatasi Jumlah karakter Pada aplikasi</h3>
		<hr style="border-top:1px dotted #ccc;"/>
		<div class="col-md-3"></div>
		<div class="col-md-6">
			<div class="form-group">
				<textarea id="editor" class="form-control" style="height:150px; resize:none;"  onKeyup="limit_character()"></textarea>
			</div>
			<div id="character-count" class="pull-right" style="color:#000;"></div>
		</div>
		</div>
		
<script src="js/script.js"></script>

</body>
</html>

Buat file dengan nama script.js file ini merupakan inti pada aplikasi sederhana ini. Scrip pada file ini berfungsi membatasi jumlah karakter pada aplikasi sesuai dengan yang di inginkan.

var limit = 150;
var character_remaining = limit;

document.getElementById("character-count").innerHTML = "Max character left: <span style='color:blue;'>"+limit+"</span>";

function limit_character() {
	var character_entered = document.getElementById('editor');
	
	if(character_entered.value.length > limit){
		character_entered.value = character_entered.value.substring(0, limit);
	}else{
		document.getElementById('character-count').innerHTML = "Number of characters left: <span style='color:blue;'>"+(character_remaining - character_entered.value.length)+"</span>";
	}
}

Kalian bisa mendownload filenya langsung pada link button dibawah ini.

Sekian share kali ini semoga apa yang kami share bermanfaat bagi anda, jika kalian belum begitu paham silahkan tinggalkan komentar dan mulai berdiskusi dengan kami.

Leave a Reply

Your email address will not be published. Required fields are marked *