چگونه تشخیص دهیم که کاربر تایپ در جاوا اسکریپت را متوقف می کند

برخی موارد لازم است که متوجه اتمام تایپ کاربر شویم تا اقدام به اجرای خود نماییم. اگر با هر تایپ کلمه ، کدها را اجرا کنیم؛ منجرب درخواست زیاد به سرور و بار سنگین می گردد که برای اینکار نیاز است که زمان اتمام تایپ کاربر را متوجه و کلمه نهایی را ارسال نماییم. برای اینکار لازم است که زمان اتمام یا توقف تایپ توسط کاربر را متوجه شویم. برای اینکار با استفاده از کدهای جاوا اسکریپت Java Script استفاده می نماییم. کافیست که کدهای زیر را درون برنامه خود جاساز کنید. ما برای درک کامل یک نمونه ایجاد کردیم.

زمان تشخیص پایان تایپ

اگر زمان تشخیص پایان تایپ با استفاده از جاوا اسکریپت تشخیص دهید. کار برای برنامه نویسی شما راحت می شود. اینگونه بعد از پایان تایپ اقدام به ارسال اطلاعات می نمایید.

مثلا شما قرار است که یک سرچ باکس ایجاد کنید که با هر بار تایپ کاربر ، جستجو را انجام و نتایجی را سریع نشان دهید. در این زمان با هر کلمه تایپ موجب ارسال به سرور می شوید.

بدین منظور کافیست که ابتدا تایپ کاربر به اتمام رسیده و سپس ارسال کنید.

اگر هر کلمه که تایپ می گردد؛ مثلا کلمه “نمای من” شما 7 بار Request ارسال می کنید ولی به روش کدهای این بخش شما فقط 2 بار ارسال می کنید.

کد تشخیص پایان تایپ کاربر با جاوا اسکریپت

مراحل تشخیص توقف تایپ کاربر

1- ایجاد فایل html

ابتدا شما یک فایل به نام index.html ایجاد کنید و کدهای زیر را درون آن قرار دهید.

<!DOCTYPE html>
<!-- How to detect when the user stops typing in JavaScript -->
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
	<center>
		<h2>طراحی سایت نمای من</h2>
		<h3>کد تشخیص زمان پایان تایپ کاربر</h3>

		<input
		  type="text"
		  id="message"
		  name="message"
		  placeholder="شروع تایپ"
		/>
		
		<div id="result"></div>
	</center>
    <script src="index.js"></script>
  </body>
</html>

2- ایجاد فایل JS

سپس یک فایل به نام index.js ایجاد و کدهای زیر را درون آن قرار دهید.

/**
*
* Nemayman.com
*
**/

let timer;

const waitTime = 1000;

const messageInput = document.getElementById('message');

messageInput.addEventListener('keyup', event => {
  clearTimeout(timer);

  timer = setTimeout(() => {
    doneTyping(event.target.value);
  }, waitTime);
});

function doneTyping(value) {
  console.log(`The user is done typing: ${value}`);
  document.getElementById('result').innerHTML = value;
}

3- اجرای کد تشخیص اتمام تایپ

حالا فایل html خود را اجرا کنید. همانند تصویر این بخش شما دارای یک کد تشخیص اتمام تایپ کاربر با زبان برنامه نویسی کد جاوا اسکریپت هستید.

کافیست خروجی خود را درون این کدها قرار دهید.

بنر افزونه نمای من