У меня есть два поля ввода, одно для номера телефона, другое для электронной почты. Я хотел бы отключить одно поле на основе выбора пользователя. Если пользователь щелкнет и введет ввод в одном из полей, он отключит другое и наоборот.
Я написал код, но он, кажется, отключает поле электронной почты только после ввода цифр в поле телефона. Удаление номеров в поле телефона удаляет отключенных из поля ввода электронной почты.
В МОЕМ HTML
<input type="number" name="number" placeholder="hone" class="cellphone" data-cp-visibility="new-user" id="phone">
<input type="email" name="email" placeholder="enter email" class="email" data-cp-visibility="new-user" id="email">
В ЯВАСЦРИПТЕ
$('#phone').live('blur',function(){
if(document.getElementById('phone').value > 1) {
$('#email').attr('disabled', true);
} else {
$('#email').attr('disabled', false);
}
});
$('#email').live('blur',function(){
if(document.getElementById('email').value > 1) {
$('#phone').attr('disabled', true);
} else {
$('#phone').attr('disabled', false);
}
});
В конечном итоге я пытаюсь добиться того, чтобы пользователь мог щелкнуть в любом поле, а затем ввести ввод, после чего другое поле отключено. Если они решат удалить введенный текст, это приведет к удалению отключенной функции, а затем они смогут выбрать противоположное поле ввода.
Я не уверен, почему он работает только для одного поля, а не для другого, или почему, если вы введете в поле телефона 333-333-3333, он отключит отключенный, но 33333333 работает нормально.
Любые идеи или понимание того, что я могу упустить?
3 ответа
Чтобы исправить проблему с приборной панелью, которую вы испытываете, вы можете изменить ее на:
<input type="text" required="" pattern="\d{3}[\-]\d{3}[\-]\d{4}" name="phone" id="phone" data-cp-visibility="new-user" placeholder="123-345-5678">
И вот еще одна версия JS:
var $phone = $('#phone'),
$email = $('#email');
$phone.on('keyup change', function() {
$email.prop('disabled', $(this).val() ? true : false );
});
$email.on('keyup change', function() {
$phone.prop('disabled', $(this).val() ? true : false );
});
Вы можете использовать jQuery on
вместо live
. Начиная с jQuery 1.7, лайв устарел. Вы также можете найти событие keyup
/ keydown
в элементе ввода.
$(function(){
$('#phone').on('keyup',function(){
if($(this).val()!=="")
{
$('#email').prop('disabled', true);
}
else {
$('#email').attr('disabled', false);
}
});
$('#email').on('keyup',function(){
if($(this).val()!=="")
{
$('#phone').prop('disabled', true);
}
else {
$('#phone').prop('disabled', false);
}
});
});
Здесь - рабочий пример.
Я бы порекомендовал использовать .on('input', ...)
для прослушивания изменений, так что даже если вы используете кнопки увеличения / уменьшения (или другие формы ввода), вы будете запускать обработчик событий. Затем используйте .attr('disabled', boolean)
для управления состоянием включения / выключения, см. Пример ниже:
$(function() {
$('#phone').on('input', function() {
$('#email').attr('disabled', $(this).val() !== "");
});
$('#email').on('input', function() {
$('#phone').attr('disabled', $(this).val() !== "");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" placeholder="phone" id="phone">
<input type="email" placeholder="enter email" id="email">
Похожие вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript / JS) и его различных диалектах / реализациях (кроме ActionScript). Включите все соответствующие теги в свой вопрос; например, [node.js], [jquery], [json] и т. д.