Question

当我开始在textarea中编写文本时，我希望带有类框的外部div使其边框变为实线而不是虚线，但不知何故：在这种情况下，焦点不适用。如果它适用于：活动，它怎么会不起作用：焦点？

任何想法为什么？

（注意。我希望DIV的边框变得坚固，而不是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>

Answer 1

如果设置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>

有关focus和blur的详情，您可以查看this article。

<强>更新以下是使用focus创建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>

Answer 2

其他海报已经解释了为什么:focus伪类不够，但最后有一个基于CSS的标准解决方案。

CSS Selectors Level 4定义了一个新的伪类：

:focus-within

来自MDN：

:focus-within CSS伪类匹配:focus的任何元素伪类匹配或具有:focus后代的匹配伪类匹配。（这包括阴影树中的后代。）

现在使用:focus-within伪类 - 在textarea被点击时设置外部div变得微不足道。

.box:focus-within {
    border: thin solid black;
}

＆＃13;

.box {
    width: 300px;
    height: 300px;
    border: 5px dashed red;
}

.box:focus-within {
    border: 5px solid green;
}

＆＃13;

<p>The outer box border changes when the textarea gets focus.</p>
<div class="box">
    <textarea rows="10" cols="25"></textarea>
</div>

＆＃13;

<强> Codepen demo

NB： Browser Support：Chrome（60 +），Firefox和Safari

Answer 3

虽然单靠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

参考文献：

Answer 4

现在可以通过css方法import { Injectable } from '@angular/core'; @Injectable() export class MyService { private connection; constructor() { this.connect().then((connection) => { this.connection = connection; // Components should be able to consume this service once execution reaches this point, but not before! }); } private connect(): Promise<any> { // (return some promise which will eventually resolve with a connection) } public getData(key: string): string { // (this method won't be usable until the .then() in the constructor has run) } }来实现，例如：http://www.scottohara.me/blog/2017/05/14/focus-within.html

＆＃13;

:focus-within

＆＃13;

/*
  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;
}

＆＃13;

Answer 5

简单使用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>

Answer 6

根据the spec：

:focus伪类适用于元素具有焦点（接受键盘事件或其他形式的文本输入）。

<div>不接受输入，因此无法:focus。此外，CSS不允许您基于定位其后代来设置元素的样式。除非你愿意使用JavaScript，否则你无法真正做到这一点。

Answer 7

您可以在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>

Answer 8

据我所知，你必须使用javascript来推进dom。

这样的事情：

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

你也需要加载jQuery库。

Answer 9

焦点内

.box:focus-within {
  background: cyan;
}

使用：专注于外部div的风格？

9 个答案:

:focus-within