Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 15.03.2014, 13:41
Аспирант
Отправить личное сообщение для ArtemKrass Посмотреть профиль Найти все сообщения от ArtemKrass
 
Регистрация: 23.02.2013
Сообщений: 56

Странное поведение readonly
Всем доброго дня!

Использую плагин jQuery Text Change Event http://zurb.com/playground/jquery-te...e-custom-event для отслеживания событий...

Имеем два текстовых поля:
<input type="text" id="1" name="1" value="" size="12" maxlength="10" class="form-text required">
        <br />
<input type="text" id="2" name="2" value="" size="12" maxlength="10" class="form-text required">


и код:

jQuery('#1:not(.disabled)').bind('textchange', function (event, previousText) {
    if (jQuery(this).hasClass("disabled") == false) {
    if (jQuery(this).val().length > 0) {
          jQuery('#2').addClass('disabled').attr("readonly","readonly");
    }
    else   jQuery('#2').removeClass('disabled').removeAttr("readonly", "readonly" );
  jQuery('#2').val(jQuery(this).val());
    }
});



jQuery('#2:not(.disabled)').bind('textchange', function (event, previousText) {
alert ('Hello');    
});


В первое поле что-нибудь вводим... Второму полю добавляется класс disabled и атрибут readonly.

Вроде бы все правильно, НО:

если навести курсор на второе поле и нажать какую-нибудь клавишу, один раз срабатывает событие textchange.

Почему так происходит и как от этого избавиться? Второй день ломаю голову, перепробовал кучу проверок... Такое ощущение что фактически класс с атрибутом добавляются только после нажатия на втором поле... Но браузер то правильно обрабатывает (класс и атрибут добавляет сразу)...

Вот готовый код:

http://jsfiddle.net/kjv7a/
Ответить с цитированием
  #2 (permalink)  
Старый 15.03.2014, 14:12
Аспирант
Отправить личное сообщение для ArtemKrass Посмотреть профиль Найти все сообщения от ArtemKrass
 
Регистрация: 23.02.2013
Сообщений: 56

Как сделать так, чтобы событие textchange вызывалось во втором поле только при условии что у поля отсутствует класс disabled?

jQuery('#2:not(.disabled)') как видно из моего кода не помогает... А почему?
Ответить с цитированием
  #3 (permalink)  
Старый 15.03.2014, 14:59
Аспирант
Отправить личное сообщение для NeoN Посмотреть профиль Найти все сообщения от NeoN
 
Регистрация: 01.03.2013
Сообщений: 77

есть вариант сделать так

jQuery('#1:not(.disabled)').bind('textchange', function (event, previousText) {
    if (jQuery(this).hasClass("disabled") == false) {
		if (jQuery(this).val().length > 0) {
		      jQuery('#2').addClass('disabled').attr("readonly","readonly").unbind('textchange');

		}
		else   jQuery('#2').removeClass('disabled').removeAttr("readonly", "readonly" ).bind('textchange', function (event, previousText) {
			alert ('Hello');    
		});

  		jQuery('#2').val(jQuery(this).val());
    }

});
jQuery('#2:not(.disabled)').bind('textchange', function (event, previousText) {
	alert ('Hello');    
});
Ответить с цитированием
  #4 (permalink)  
Старый 15.03.2014, 15:15
Аспирант
Отправить личное сообщение для NeoN Посмотреть профиль Найти все сообщения от NeoN
 
Регистрация: 01.03.2013
Сообщений: 77

или так... наверное, еще лучше)

jQuery('#1:not(.disabled)').bind('textchange', function (event, previousText) {
    if (jQuery(this).hasClass("disabled") == false) {
    if (jQuery(this).val().length > 0) {
          jQuery('#2').addClass('disabled').attr("readonly","readonly");
    }
    else   jQuery('#2').removeClass('disabled').removeAttr("readonly", "readonly" );
  jQuery('#2').val(jQuery(this).val());
    }
});


jQuery('#2').on('textchange',':not(.disabled)', function (event, previousText) {
	alert ('Hello');    
});



думаю, в случае с bind, функция-обработчик прикрепляется к текущему выбранному элементу сразу при запуске скрипта. в данном случае этот элемент является вторым полем. и даже в случае изменения второго поля через скрипт, обработчик остается висеть и ожидать изменения текста, хотя ввод в само поле уже запрещен. поэтому и функция, дождавшись своего часа, выполняется при нужном событии. и только потом обработчик перезаписывается к этому элементу

при использовании on() функция прикрепляется к элементу только после срабатывания нужного события.

вывод: использование on() предпочтительней в данном случае. но нужен jquery версии не ниже 1.7

Последний раз редактировалось NeoN, 15.03.2014 в 15:24.
Ответить с цитированием
  #5 (permalink)  
Старый 15.03.2014, 15:29
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

А нельзя понастоящему дизейблить? .prop('disabled', true)
Вместо работы с атрибутами нужно делать так:
.prop('readOnly', true), .prop('readOnly', false)
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #6 (permalink)  
Старый 15.03.2014, 15:37
Аспирант
Отправить личное сообщение для ArtemKrass Посмотреть профиль Найти все сообщения от ArtemKrass
 
Регистрация: 23.02.2013
Сообщений: 56

К сожалению дизейблить нельзя, так как данные из полей потом нужно использовать...
Ответить с цитированием
  #7 (permalink)  
Старый 15.03.2014, 16:53
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,055

ArtemKrass,
а можно узнать зачем вам плагин и что должен делать ваш код, из ваших описаний я плохо понял
Ответить с цитированием
  #8 (permalink)  
Старый 15.03.2014, 17:08
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,055

ArtemKrass,
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
<script type='text/javascript'>
 $(function () {
      $("body").on('input', '#1:not(.disabled)',
          function () {
              if (this.value.length > 0) {
                  $('#2').addClass('disabled').prop("readonly", true);
              } else $('#2').removeClass('disabled').prop("readonly", false);
              jQuery('#2').val(this.value)
          }

      ).on('input', '#2:not(.disabled)', function () {
          alert('Hello');
      });
  });
</script>
</head>

<body>
<input type="text" id="1" name="1" value="" size="12" maxlength="10" class="form-text required">
        <br />
<input type="text" id="2" name="2" value="" size="12" maxlength="10" class="form-text required">
</body>

</html>
Ответить с цитированием
  #9 (permalink)  
Старый 15.03.2014, 17:14
Аспирант
Отправить личное сообщение для ArtemKrass Посмотреть профиль Найти все сообщения от ArtemKrass
 
Регистрация: 23.02.2013
Сообщений: 56

Есть три текстовых поля
площадь
общая цена
цена за 1м

Плагин отслеживает все события ввода, в том числе и paste мышью и т.д.

Так вот, мне нужно чтобы при вводе пользователем площади и какой-нибудь из цен автоматически просчитывалась бы другая...

Поэтому при вводе в одну из цен, вторую мне нужно делать readonly...
Но если пользователь удалил цену, то возвращать все в первоначальное положение.

Не знаю, может я все усложнил... Есть ли способы попроще? За намек буду премного благодарен...
Ответить с цитированием
  #10 (permalink)  
Старый 15.03.2014, 17:19
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,055

ArtemKrass,
удалил цену == 0, нет цены цена ноль так разве не проще -- нет площади площать ноль
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Странное поведение jQuery borodatych Javascript под браузер 5 27.02.2014 10:47
Странное поведение innerHTML DoubleDragon Общие вопросы Javascript 9 10.08.2012 16:09
Странное поведение ajax! 0931454574 AJAX и COMET 4 03.04.2011 14:57
Странное поведение переменной mycoding Серверные языки и технологии 4 14.01.2011 19:18
Странное поведение replace cooli0 Общие вопросы Javascript 4 25.01.2010 17:16