سلام دوستان وقتتون بخیر
میخواستم ببینم چطور میتونم با js محل تایپ رو شناسایی کنم
یک textarea دارم و میخوام محل تایپ و متنی که سلکت میکنه کاربر رو شناسایی کنه
برای ساخت تکست ادیتور میخوام
البته کدی که بهتون دادم برای استفاده در یک صفحه HTML مشخص نیست. اما برای تست، میتوانید کد زیر را در یک صفحه HTML قرار دهید:
html
<!DOCTYPE html>
<html>
<head>
<title>Test Page</title>
</head>
<body>
<textarea id="myTextarea"></textarea>
<script type="text/javascript">
const textarea = document.getElementById('myTextarea');
textarea.addEventListener('input', () => {
const previousText = textarea.value.substring(0, textarea.selectionStart);
const afterText = textarea.value.substring(textarea.selectionEnd);
const newText = 'متن جدید'; // متنی که میخواهید به textarea اضافه کنید
textarea.value = previousText + newText + afterText;
});
</script>
</body>
</html>
در این صفحه، یک تگ textarea قرار دارد که با استفاده از رویداد input، هر متنی که کاربر وارد میکند را دریافت میکند و متن جدیدی (که البته در کد فعلی ثابت است و میتوانید تغییر دهید) را با محتوای فعلی ترکیب کرده و در textarea قرار میدهد.
پس از ذخیره این کد در یک فایل HTML و باز کردن آن در مرورگر، میتوانید به صورت تستی تغییراتی را که کاربر در textarea ایجاد میکند، ببینید.
سلام! برای شناسایی محل تایپ و متنی که کاربر در یک textarea سلکت میکند، میتوانید از دو خصوصیت selectionStart و selectionEnd استفاده کنید.
selectionStart نشانگر ابتدایی ترین انتخاب کاربر در textarea است و selectionEnd نشانگر پایانی ترین انتخاب کاربر میباشد. اگر هیچ متنی انتخاب نشده باشد، این دو خصوصیت هر دو برابر با محل تایپ کاربر (یعنی شاخص محل تایپ) خواهند بود.
برای مثال، با استفاده از کد زیر میتوانید مقدار متنی را که کاربر در textarea انتخاب کرده است، دریافت کنید:
javascript
const textarea = document.getElementById('myTextarea');
const selectedText = textarea.value.substring(textarea.selectionStart, textarea.selectionEnd);
همچنین میتوانید با استفاده از رویداد input ردیابی کنید که کاربر چه تغییراتی در textarea ایجاد کرده است. به عنوان مثال، با استفاده از کد زیر میتوانید متن جدید را با محل تایپ فعلی کاربر به textarea اضافه کنید:
javascript
const textarea = document.getElementById('myTextarea');
textarea.addEventListener('input', () => {
const previousText = textarea.value.substring(0, textarea.selectionStart);
const afterText = textarea.value.substring(textarea.selectionEnd);
const newText = 'متن جدید'; // متنی که میخواهید به textarea اضافه کنید
textarea.value = previousText + newText + afterText;
});
امیدوارم که مفید واقع شده باشد. در صورتی که سوال دیگری دارید، خوشحال میشوم پاسخگوی شما باشم.
@oxbir
میشه لطفا یک مثال بزنید چون من خیلی js بلد نیستم اینم واسه یه پروژه میخوام
اگه میشه یه تیکه کد تست بزارید تا بتونم تو html تستش کنم
@FullStack
@mrahmadi
@magicaldev1
@ossvahid
@mahdidv
@Arshiamohammadei
@Raymond
@SZaaaa1111
لطفا هرکسی میتونه کمک کنه بگه
سلام
<textarea onkeyup="getLineNumber(this, document.getElementById('lineNo'));" onmouseup="this.onkeyup();"></textarea>
<div id="lineNo"></div>
function getLineNumber(textarea, indicator) {
indicator.innerHTML = textarea.value.substr(0, textarea.selectionStart).split("\n").length;
}
البته کدی که بهتون دادم برای استفاده در یک صفحه HTML مشخص نیست. اما برای تست، میتوانید کد زیر را در یک صفحه HTML قرار دهید:
html
<!DOCTYPE html>
<html>
<head>
<title>Test Page</title>
</head>
<body>
<textarea id="myTextarea"></textarea>
<script type="text/javascript">
const textarea = document.getElementById('myTextarea');
textarea.addEventListener('input', () => {
const previousText = textarea.value.substring(0, textarea.selectionStart);
const afterText = textarea.value.substring(textarea.selectionEnd);
const newText = 'متن جدید'; // متنی که میخواهید به textarea اضافه کنید
textarea.value = previousText + newText + afterText;
});
</script>
</body>
</html>
در این صفحه، یک تگ textarea قرار دارد که با استفاده از رویداد input، هر متنی که کاربر وارد میکند را دریافت میکند و متن جدیدی (که البته در کد فعلی ثابت است و میتوانید تغییر دهید) را با محتوای فعلی ترکیب کرده و در textarea قرار میدهد.
پس از ذخیره این کد در یک فایل HTML و باز کردن آن در مرورگر، میتوانید به صورت تستی تغییراتی را که کاربر در textarea ایجاد میکند، ببینید.
آیا مایل به ارسال نوتیفیکیشن و اخبار از طرف راکت هستید ؟