پارسا صابر

12 ماه پیش توسط پارسا صابر مطرح شد

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

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

ثبت پرسش جدید

محمود خسروی

تخصص : طراح و برنامه نویس

@oxbir 12 ماه پیش مطرح شد

@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 12 ماه پیش مطرح شد

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

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

ارسال پاسخ

پارسا صابر

@parsasaber0123 12 ماه پیش مطرح شد

@FullStack
@mrahmadi
@magicaldev1
@ossvahid
@mahdidv
@Arshiamohammadei
@Raymond
@SZaaaa1111

لطفا هرکسی میتونه کمک کنه بگه

ارسال پاسخ

oss_vahid

تخصص : wordpress developer

@ossvahid 12 ماه پیش آپدیت شد

سلام

 <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 12 ماه پیش مطرح شد

@parsasaber0123

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>

ارسال پاسخ

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

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

دوره‌های آموزشی

مسیرهای یادگیری

پیشرفت من

دوره‌های رایگان

گواهی پایان دوره

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

گزینش سوالات

گفت و گو های مرتبط

دسته ‌بندی سوالات

تگ‌های محبوب

تابع زیر محل هر رو سطر رو پیدا میکنه

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