پارسا صابر
2 سال پیش توسط پارسا صابر مطرح شد
5 پاسخ

شناسایی محل تایپ یا متن سلکت شده اینپوت

سلام دوستان وقتتون بخیر
میخواستم ببینم چطور میتونم با js محل تایپ رو شناسایی کنم
یک textarea دارم و می‌خوام محل تایپ و متنی که سلکت می‌کنه کاربر رو شناسایی کنه
برای ساخت تکست ادیتور میخوام


ثبت پرسش جدید
محمود خسروی
تخصص : طراح و برنامه نویس
@oxbir 2 سال پیش مطرح شد
0

@parsasaber0123

البته کدی که بهتون دادم برای استفاده در یک صفحه 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 ایجاد می‌کند، ببینید.


محمود خسروی
تخصص : طراح و برنامه نویس
@oxbir 2 سال پیش مطرح شد
1

سلام! برای شناسایی محل تایپ و متنی که کاربر در یک 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;
});

امیدوارم که مفید واقع شده باشد. در صورتی که سوال دیگری دارید، خوشحال می‌شوم پاسخگوی شما باشم.


پارسا صابر
@parsasaber0123 2 سال پیش آپدیت شد
0

@oxbir
میشه لطفا یک مثال بزنید چون من خیلی js بلد نیستم اینم واسه یه پروژه میخوام
اگه میشه یه تیکه کد تست بزارید تا بتونم تو html تستش کنم


پارسا صابر
@parsasaber0123 2 سال پیش مطرح شد
oss_vahid
تخصص : wp developer
@ossvahid 2 سال پیش آپدیت شد
0

سلام

 <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;
        }

محمود خسروی
تخصص : طراح و برنامه نویس
@oxbir 2 سال پیش مطرح شد
0

@parsasaber0123

البته کدی که بهتون دادم برای استفاده در یک صفحه 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 ایجاد می‌کند، ببینید.


برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام