Изменение фона DIV при вводе INPUT имеет данные. Как?

-2

У меня есть поле ввода внутри div, и я бы хотел, чтобы фон div изменился, когда в поле ввода были введены данные внутри.Изменение фона DIV при вводе INPUT имеет данные. Как?

Как это делается?

источник

2012-04-08 Erik

Кроме того, попробуйте добавить некоторую информацию об ограничениях, с которыми вы работаете. Вы ограничены определенной версией CSS? Используете ли вы специальную библиотеку javascript или вообще не используете библиотеки javascript? – Hauge

Вы можете попытаться использовать jQuery для решения этой проблемы. Загрузите jQuery в свой тег <head> и прикрепите к событию нажатия клавиши в поле ввода, добавив этот фрагмент javascript в тег скрипта ниже включения jQuery.

$(document).ready(function() { 
    $("#myInput").keypress(function() { 
     if($("#myInput").val().length > 0) $("#myDiv").css("background-color", "red"); 
    }); 
});

источник

2012-04-08 04:42:26

$('div input').keypress(function() { 
    $(this).val().length > 0) { 
     $(this).parent().css("background-color","red"); 
    } else { 
     $(this).parent().css("background-color","none"); 
    } 
});

Если вы хотите быть добры к своим веб-дизайнеров и подружиться с ними, вы можете также динамически применять и удалить атрибут класса:

$('div input').keypress(function() { 
    $(this).val().length > 0) { 
     $(this).parent().addClass("background"); 
    } else { 
     $(this).parent().removeClass("background"); 
    } 
});

Тогда ваши дизайнеры могут настроить выглядеть и чувствовать себя в файле CSS, используя крючок класса «background» CSS, не беспокоясь о том, чтобы испортить ваш прекрасный шедевр JavaScript. Это также дает им большую гибкость для внесения изменений, не помещая всю логику представления в код вашей бизнес-логики.

/* Example CSS rule */ 
input.background { 
    background-color: red; 
    border-radius: 2px; 
    -webkit-box-shadow: 0 0 6px 4px red; 
}

источник

2012-04-08 04:42:51 jmort253

@ Xander - Спасибо! Ответ обновлен. – jmort253

Изменение фона DIV при вводе INPUT имеет данные. Как?

ответ

Смежные вопросы