Frage Verwenden: Fokus, um äußere div zu stylen?


Wenn ich anfange, Text in das Textfeld zu schreiben, möchte ich, dass das äußere div mit einer Klassenbox seinen Rand fest statt gestrichelt hat, aber irgendwie gilt der Fokus in diesem Fall nicht. Wenn es funktioniert mit: aktiv, wie kommt es nicht mit: Fokus?

Irgendwelche Ideen warum?

(Anmerkung. Ich möchte, dass die Grenze des DIV fest wird, NICHT die Textareas)

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>

41
2017-10-24 13:23


Ursprung


Antworten:


Während dies mit CSS / HTML allein nicht erreicht werden kann, kann es mit JavaScript (ohne eine Bibliothek) erreicht werden:

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.

Bei einer Bibliothek, wie z. B. jQuery, könnte das obige Beispiel folgendermaßen zusammengefasst werden:

$('textarea').focus(
    function(){
        $(this).parent('div').css('border-style','solid');
    }).blur(
    function(){
        $(this).parent('div').css('border-style','dashed');
    });

JS Fiddle Demo.

Verweise:


31
2017-10-24 13:48



DIV Elemente können den Fokus erhalten, wenn sie gesetzt sind tabindex Attribut. Hier ist das Arbeitsbeispiel.

#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>

Für mehr Informationen über focus und blur, können Sie auschecken Dieser Artikel.

Aktualisieren: Und hier ist ein weiteres Beispiel mit focus ein erstellen menu.

#toggleMenu:focus {
  outline: none;
}
button:focus + .menu {
  display: block;
}
.menu {
  display: none;
}
.menu:focus {
  display: none;
}
<div id="toggleMenu" tabindex="0">
  <button type="button">Menu</button>
  <ul class="menu" tabindex="1">
    <li>Home</li>
    <li>About Me</li>
    <li>Contacts</li>
  </ul>
</div>


50
2018-06-20 07:13



Andere Plakate haben bereits erklärt warum :focus Pseudoklasse ist nicht ausreichend, aber schließlich gibt es eine CSS-basierte Standardlösung.

CSS-Selektoren Level 4 definiert eine neue Pseudoklasse:

: Fokus-in

Von MDN:

Das :focus-within Die CSS-Pseudoklasse stimmt mit jedem Element überein, das der :focus   Pseudo-Klasse passt oder das hat einen Nachkomme, der die :focus   Pseudo-Klassen-Übereinstimmungen. (Dazu gehören Nachkommen in Schattenbäumen.)

Also jetzt mit dem :focus-within pseudoklasse - das äußere div zu formatieren, wenn das Textfeld angeklickt wird, wird trivial.

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>

Codepen-Demo

NB:  Browserunterstützung : Chrome (60+), Firefox und Safari


25
2017-07-09 10:38



Einfache Verwendung von 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>


3
2017-11-13 16:07



Nach die Spezifikation:

Das :focus Pseudoklasse gilt, während ein Element den Fokus hat (akzeptiert Tastaturereignisse oder andere Formen der Texteingabe).

Das <div> akzeptiert keine Eingabe, also kann es nicht haben :focus. Darüber hinaus können Sie mit CSS keine Stile für ein Element festlegen, die auf dem Targeting seiner Nachkommen basieren. Sie können das also nur tun, wenn Sie JavaScript verwenden möchten.


2
2017-10-24 13:30



Dies kann jetzt durch die CSS-Methode erreicht werden :focus-within wie in diesem Post beispielhaft dargestellt: 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="http://scottohara.me">
      My Website
    </a>
  </p>

  <label for="wut_email">
    Your email:
  </label>
  <input type="email" id="wut_email" />
</div>


2
2017-10-20 16:01



Sie können zwischen div-Tags wechseln. Fügen Sie einfach einen Tab-Index zum div hinzu. Am besten verwenden Sie jQuery und CSS-Klassen, um dieses Problem zu lösen. Hier ist eine funktionierende Probe in IE, Firefox und Chrome getestet (Neueste Versionen ... nicht älter getestet).

<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>

1
2018-05-03 15:46



Soweit mir bekannt ist, müssen Sie Javascript verwenden, um das Dom zu reisen.

Etwas wie das:

$("textarea:focus").parent().attr("border", "thin solid black");

Sie müssen auch die jQuery-Bibliotheken laden.


0
2017-10-24 13:29