ورود

View Full Version : نوشتن کد در textchange کنترل textbox


shedayat
دوشنبه 17 تیر 1392, 19:31 عصر
سلام دوستان.
من سعی کردم در رویداد textchange کنترل textbox کد بنویسم که کاربر با وارد کردن هر حرفی اون کد اجرا بشه. ولی این کد فقط زمانی که مقدار تکست باکس تغییر کرد و موقع lost focus اجرا می شه.
دوستانی که تو این زمینه اطلاعات دارن در مورد نحوه انجام این کار راهنمایی کنند لطفا.
jalil_gh
سه شنبه 18 تیر 1392, 09:30 صبح
شما میتونید این کدها رو برای رویداد keyup بنویسید. به طوری که هر وقت رویداد keyup اتفاق افتاد چک کنید اگه مقدار textbox عوض شده بود کدهاتونو اجرا کنید.
afshin9032
سه شنبه 18 تیر 1392, 14:31 عصر
از keypress استفاده کن
jalil_gh
سه شنبه 18 تیر 1392, 23:02 عصر
از keypress استفاده کن
keypress دو تا مشکل کوچیک برای این منظور داره.
۱. keypress قبل چاپ کاراکتر تو textBox اتفاق می‌افته. یعنی اول این رویداد اتفاق می‌افته بعد کاراکتر تو textBox چاپ میشه. بنابراین شما به مقدار کامل textBox درون این رویداد دسترسی نخواهید داشت.
۲. keypress فقط برای کلیدهایی اتفاق می‌افته که کاراکتری رو چاپ کنن. برای همین وقتی که شما backspace رو فشار میدید با اینکه مقدار textBox تغییر میکنه ولی رویداد keypress اتفاق نمی‌افته.
یه مشکل دیگه هم داره اونم اینه که تو DOM level 3 به جای اون پیشنهاد شده که از رویداد textInput استفاده بشه. برای همین آینده keypress معلوم نیست.
برای همین پیشنهاد میشه که بدین منظور از keyup استفاده کنید.

شما میتونید تو جی‌کوئری رویدادهای خودتون رو تعریف کنید. این کد رویداد textChange رو برای همه input ها تعریف میکنه:
$('input').keyup(function () {
var $this = $(this),
oldVal = $this.data('value') || '',
newVal = $this.val();

if (oldVal !== newVal) {
$this.trigger('textChange');
$this.data('value', newVal);
}
});

حالا شما میتونید به این صورت از این کدها استفاده کنید.
$('input').on('textChange', function () {
console.log($(this).val());
})
shedayat
سه شنبه 18 تیر 1392, 23:14 عصر
keypress دو تا مشکل کوچیک برای این منظور داره.
۱. keypress قبل چاپ کاراکتر تو textBox اتفاق می‌افته. یعنی اول این رویداد اتفاق می‌افته بعد کاراکتر تو textBox چاپ میشه. بنابراین شما به مقدار کامل textBox درون این رویداد دسترسی نخواهید داشت.

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


۲. keypress فقط برای کلیدهایی اتفاق می‌افته که کاراکتری رو چاپ کنن. برای همین وقتی که شما backspace رو فشار میدید با اینکه مقدار textBox تغییر میکنه ولی رویداد keypress اتفاق نمی‌افته.

فکر نکنم اینطوری باشه. چون برای همون کار بالا (شمارش کلمات) وقتی که حرفی پاک میشه بازم این تابع صدا زده می شه. پس هر دکمه ای رو شامل می شه.

با تشکر از پاسختون.
jalil_gh
سه شنبه 18 تیر 1392, 23:28 عصر
یه نکته‌ دیگه‌ای که در مورد keypress هست اینه که چون استانداردسازی نشده مرورگرهای مختلف به انواع مختلفی اونو اعمال کردن. مثلا در مورد فشردن کلید backspace. تو فایرفاکس این کار رویداد keypress رو اجرا میکنه ولی کروم این کار رو نمیکنه. در مورد تعداد کاراکتر ها هم باید بگم هم فایرفاکس و هم کروم هردو تعداد کاراکترها رو یکی کمتر نمایش میدن.
من این رو هم تو فایرفاکس و هم تو کروم تست کردم

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>

</style>
</head>
<body>

<input type='text'>

<script>
document.getElementsByTagName('input')[0].addEventListener('keypress', function () {
console.log(this.value.length);
}, false);
</script>
</body>

</html>