Как повесить два события на клик по элементу и вне его?

Question

[Raneto4ka]

Есть поле input, изначально заблоченное. Нужно, что бы при клике на него появлялась возможность редактирования поля, а при клике вне его - снова появлялся статус readonly. (Там потом ешё в промежутке валидация будет).

Вот мой вариант https://jsfiddle.net/yo98uc75/10/
Но тут, во-первых, событие срабатывает на два поля, а надо только на текущее.
А во-вторых, мне не очень нравится, что проверятеся каждый клик по странице. Как можно переписать код, что бы эти события срабатывали только при клике на конкретный инпут, и вне его.

Comments

[0xD34F]

А в чём смысл readonly, если он снимается просто по клику?

[snap44]

0xD34F, выбесить тех, кто сёрфит сайты с клавиатуры.

[lloydbanks]

Судя по нику вопрос задала представительница прекрасного пола с напоминанием о том, что женская логика не дремлет

[Raneto4ka]

1n3gan, Вы думаете я сама себе задания придумываю?

[Raneto4ka]

0xD34F, для редактирования своих данных в личном кабинете. Т.е. изначально ты видишь данные при регистрации (из БД), а если хочешь их изменить, то кликаешь по полю и оно становится доступным для изменения

[Владимир Проскурин]

1n3gan, ваша логика еще шикарнее.

[0xD34F]

Raneto4ka, а теперь представим, что никакого readonly нет. И что получится? А то же самое - "видишь данные", "хочешь их изменить", "кликаешь по полю". Было оно доступным для изменения, не было - разницы нет. Так зачем же нужен readonly?

[Raneto4ka]

0xD34F, Так внешний вид разный. Поле с readonly имеет вид обычной строки, а без - это полноценный инпут (окно для ввода данных, тобишь).

[0xD34F]

Raneto4ka, да ну? Это где разный? Вот у меня в хроме разницы никакой не наблюдается. И в фаерфоксе. И в ие. Для кастомизации внешнего вида следует использовать классы, использование же readonly для подобного - это ДУРЬ.

[snap44]

Raneto4ka, стилизуйте :focus и обычное состояние и не морочьте себе голову ерундой.

[Raneto4ka]

snap44, как вариант! Спасибо за наводку, попробую

[Александр Маргинал]

Raneto4ka, css в помощь. Смотрите в сторону hover, focus

Answer 1

[Владимир Проскурин]

Только не понятно, зачем вам такое извращение. Ведь если вводить символы в первое поле, а потом нажать на tab, то во второе не ввести.

Comments

[Raneto4ka]

У вас в input_edit сейчас попадает любой элемент, на котором клик происходит. Но у меня на странице еще куча всего, кроме них, и надо отслеживать только конкретные input. А извращения эти хочет заказчик, конечно же)

[Владимир Проскурин]

Raneto4ka, ну, я не давал 100% код, я подал идею.

$(function() {
    $(document).click(function (e){
        var input_edit = $(e.target);
 				
        $(".plaintext_edit").removeClass("form-control").attr("readonly", true).addClass("form-control-plaintext");
        if(input_edit.has('.plaintext_edit')) {
        	input_edit.addClass("form-control").removeAttr("readonly").removeClass("form-control-plaintext");
        }
    });             
})

[Raneto4ka]

Владимир Проскурин, спасибо! Попробую внедрить Вашу идею, может сработает

Answer 2

[Артем Спиридонов]

<input class="target">

<script type="text/javascript">
	$(document).on('click', function(e) {
		if ($(e.target).hasClass('target'))
		{
			// отрабатываем клик на инпут
			$('.target').prop('disabled', false);
		}
		else
		{
			// отрабатываем клик вне инпута
			if ( ! $('.target').prop('disabled'))
			{
				$('.target').prop('disabled', true);
			}
		}

});

</script>

P.S. Есть подозрение, что саму задачу можно по-другому сформулировать.

Answer 3

[Raneto4ka]

В итоге обошлась без скриптов. Спасибо всем, и отдельно тем, кто навёл на мысль стилизовать состояние :focus