Использование: фокус для стилей внешнего div?
Когда я начинаю писать текст в текстовом поле, я хочу, чтобы внешний div, с полем класса, имел границу, которая стала твердой, а не пунктирной, но так или иначе фокус в этом случае не применяется. Если он работает с: активным, то как он не работает: focus?
Любые идеи, почему?
(Обратите внимание: я хочу, чтобы граница DIV стала твердой, а не текстовой)
div.box
{
width: 300px;
height: 300px;
border: thin dashed black;
}
div.box:focus{
border: thin solid black;
}
<div class="box">
<textarea rows="10" cols="25"></textarea>
</div>
Ответы
Ответ 1
Хотя этого не может быть достигнуто только с помощью CSS/HTML, это может быть достигнуто с помощью JavaScript (без библиотеки):
var textareas = document.getElementsByTagName('textarea');
for (i=0;i<textareas.length;i++){
// you can omit the 'if' if you want to style the parent node regardless of its
// element type
if (textareas[i].parentNode.tagName.toString().toLowerCase() == 'div') {
textareas[i].onfocus = function(){
this.parentNode.style.borderStyle = 'solid';
}
textareas[i].onblur = function(){
this.parentNode.style.borderStyle = 'dashed';
}
}
}
JS Fiddle demo.
Кстати, с библиотекой, такой как jQuery, приведенное выше может быть сокращено до:
$('textarea').focus(
function(){
$(this).parent('div').css('border-style','solid');
}).blur(
function(){
$(this).parent('div').css('border-style','dashed');
});
JS Fiddle demo.
Литература:
Ответ 2
Элементы DIV могут получить фокус, если установить атрибут tabindex. Вот рабочий пример.
#focus-example > .extra {
display: none;
}
#focus-example:focus > .extra {
display: block;
}
<div id="focus-example" tabindex="0">
<div>Focus me!</div>
<div class="extra">Hooray!</div>
</div>
Ответ 3
Другие плакаты уже объяснили, почему псевдокласс класса :focus недостаточен, но, наконец, существует стандартное решение на основе CSS.
Селектора CSS Уровень 4 определяет новый псевдокласс:
Из MDN:
Псевдо-класс :focus-within CSS соответствует любому элементу, который :focusсовпадения псевдокласса или с потомком, что :focusпсевдокласс. (Сюда входят потомки в теневых деревьях.)
Итак, теперь с :focus-within псевдоклассом - стиль внешнего div при щелчке по текстовой области становится тривиальным.
div.box:focus-within {
border: thin solid black;
}
div.box {
width: 300px;
height: 300px;
border: thin dashed black;
}
div.box:focus-within {
border: thin solid black;
}
<p>The outer box border changes when the textarea gets focus.</p>
<div class="box">
<textarea rows="10" cols="25"></textarea>
</div>
Ответ 4
Простое использование JQuery.
$(document).ready(function() {
$("div .FormRow").focusin(function() {
$(this).css("background-color", "#FFFFCC");
$(this).css("border", "3px solid #555");
});
$("div .FormRow").focusout(function() {
$(this).css("background-color", "#FFFFFF");
$(this).css("border", "0px solid #555");
});
});
.FormRow {
padding: 10px;
}
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<div style="border: 0px solid black;padding:10px;">
<div class="FormRow">
First Name:
<input type="text">
<br>
</div>
<div class="FormRow">
Last Name:
<input type="text">
</div>
</div>
<ul>
<li><strong><em>Click an input field to get focus.</em></strong>
</li>
<li><strong><em>Click outside an input field to lose focus.</em></strong>
</li>
</ul>
</body>
</html>
Ответ 5
По спецификация:
Псевдокласс класса :focus применяется, когда элемент имеет фокус (принимает события клавиатуры или другие формы ввода текста).
<div> не принимает ввод, поэтому он не может иметь :focus. Кроме того, CSS не позволяет вам устанавливать стили в элементе, основанном на таргетинге на его потомков. Поэтому вы не можете этого сделать, если не хотите использовать JavaScript.
Ответ 6
Вы можете вставить вкладку между тегами div. Просто добавьте индекс вкладки в div. Лучше всего использовать классы jQuery и CSS для решения этой проблемы. Здесь рабочий образец, протестированный в IE, Firefox и Chrome (последние версии... не тестировались ранее).
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
var divParentIdFocus;
var divParentIdUnfocus = null;
$(document).ready(function() {
$("div").focus(function() {
//$(this).attr("class", "highlight");
var curDivId = $(this).attr("id");
// This Check needs to be performed when/if div regains focus
// from child element.
if (divParentIdFocus != curDivId){
divParentIdUnfocus = divParentIdFocus;
divParentIdFocus = curDivId;
refreshHighlight();
}
divParentIdFocus = curDivId;
});
$("textarea").focus(function(){
var curDivId = $(this).closest("div").attr("id");
if(divParentIdFocus != curDivId){
divParentIdUnfocus = divParentIdFocus;
divParentIdFocus = curDivId;
refreshHighlight();
}
});
$("#div1").focus();
});
function refreshHighlight()
{
if(divParentIdUnfocus != null){
$("#" +divParentIdUnfocus).attr("class", "noHighlight");
divParentIdUnfocus = null;
}
$("#" + divParentIdFocus).attr("class", "highlight");
}
</script>
<style type="text/css">
.highlight{
background-color:blue;
border: 3px solid black;
font-weight:bold;
color: white;
}
.noHighlight{
}
div, h1,textarea, select { outline: none; }
</style>
<head>
<body>
<div id = "div1" tabindex="100">
<h1>Div 1</h1> <br />
<textarea rows="2" cols="25" tabindex="101">~Your Text Here~</textarea> <br />
<textarea rows="2" cols="25" tabindex="102">~Your Text Here~</textarea> <br />
<textarea rows="2" cols="25" tabindex="103">~Your Text Here~</textarea> <br />
<textarea rows="2" cols="25" tabindex="104">~Your Text Here~</textarea> <br />
</div>
<div id = "div2" tabindex="200">
<h1>Div 2</h1> <br />
<textarea rows="2" cols="25" tabindex="201">~Your Text Here~</textarea> <br />
<textarea rows="2" cols="25" tabindex="202">~Your Text Here~</textarea> <br />
<textarea rows="2" cols="25" tabindex="203">~Your Text Here~</textarea> <br />
<textarea rows="2" cols="25" tabindex="204">~Your Text Here~</textarea> <br />
</div>
<div id = "div3" tabindex="300">
<h1>Div 3</h1> <br />
<textarea rows="2" cols="25" tabindex="301">~Your Text Here~</textarea> <br />
<textarea rows="2" cols="25" tabindex="302">~Your Text Here~</textarea> <br />
<textarea rows="2" cols="25" tabindex="303">~Your Text Here~</textarea> <br />
<textarea rows="2" cols="25" tabindex="304">~Your Text Here~</textarea> <br />
</div>
<div id = "div4" tabindex="400">
<h1>Div 4</h1> <br />
<textarea rows="2" cols="25" tabindex="401">~Your Text Here~</textarea> <br />
<textarea rows="2" cols="25" tabindex="402">~Your Text Here~</textarea> <br />
<textarea rows="2" cols="25" tabindex="403">~Your Text Here~</textarea> <br />
<textarea rows="2" cols="25" tabindex="404">~Your Text Here~</textarea> <br />
</div>
</body>
</html>
Ответ 7
Насколько мне известно, вы должны использовать javascript для перемещения по dom.
Что-то вроде этого:
$("textarea:focus").parent().attr("border", "thin solid black");
вам понадобятся загруженные библиотеки jQuery.
Ответ 8
Теперь это можно достичь с помощью метода css :focus-within, как показано в этом сообщении: http://www.scottohara.me/blog/2017/05/14/focus-within.html
/*
A normal (though ugly) focus
pseudo-class. Any element that
can receive focus within the
.my-element parent will receive
a yellow background.
*/
.my-element *:focus {
background: yellow !important;
color: #000;
}
/*
The :focus-within pseudo-class
will NOT style the elements within
the .my-element selector, like the
normal :focus above, but will
style the .my-element container
when its focusable children
receive focus.
*/
.my-element:focus-within {
outline: 3px solid #333;
}
<div class="my-element">
<p>A paragraph</p>
<p>
<a href="#" onclick="location.href='http://scottohara.me'; return false;">
My Website
</a>
</p>
<label for="wut_email">
Your email:
</label>
<input type="email" id="wut_email" />
</div>
