javascript - form - ng focus angular 4

CSS: Cambiar padre en foco de niño

Question

Digamos que tienes algo como:

<div class="parent">
    <input class="childInput" type="text" />
    <div class="sibling"></div>
</div>

Quiero cambiar la apariencia de los padres / hermanos cuando el niño recibe atención. ¿Hay algún truco de CSS para hacer cosas como esta?

Editar:

El motivo de mi pregunta es el siguiente:

Estoy creando una aplicación Angular que necesita campos de texto editables. Debería verse como una etiqueta hasta que se haga clic, en cuyo punto debería verse como una entrada de texto normal. El estilo del campo de texto se basa en: enfocar para lograr este efecto, pero el texto está cortado por los límites del ingreso de texto. También utilicé ng-show, ng-hide, ng-blur, ng-keypress y ng-click para cambiar entre la etiqueta y la entrada de texto basada en difuminaciones, pulsaciones de teclas y clics. Esto funcionó bien, excepto por una cosa: después de que la etiqueta ng-click = "setEdit (this, $ event)" cambie el booleano de edición usado por ng-show y ng-hide a true, usa una llamada jQuery para .select () la entrada de texto. Sin embargo, no es hasta después de completar el clic de ng que todo está $ digerido, por lo que la entrada de texto pierde el enfoque de nuevo. Dado que la entrada de texto nunca recibe realmente el foco, el uso de ng-blur para volver a mostrar la etiqueta tiene errores: el usuario tiene que hacer clic en la entrada de texto y luego hacer clic nuevamente para volver a mostrar la etiqueta.

Editar:

Aquí hay un ejemplo de este tema: http://plnkr.co/edit/synSIP?p=preview

Answer 1

Ahora puede hacer esto en CSS puro, por lo que no se necesita JavaScript.

La nueva pseudoclase de CSS :focus-within ayudaría en casos como este y ayudará con la accesibilidad cuando las personas usan tabulaciones para navegar, algo común cuando se usan lectores de pantalla.

.parent:focus-within {
  border: 1px solid #000;
}

La pseudo-clase: enfoca dentro de elementos que coinciden con ellos mismos: foco o que tienen descendientes que coinciden con: foco.

Puede verificar qué navegadores admiten este http://caniuse.com/#search=focus-within

Manifestación

fieldset {
  padding: 0 24px 24px !important;
}

fieldset legend {
  opacity: 0;
  padding: 0 8px;
  width: auto;
}

fieldset:focus-within {
  border: 1px solid #000;
}

fieldset:focus-within legend {
  opacity: 1;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <form>
    <fieldset>
      <legend>Parent Element</legend>
      <div class="form-group">
        <label for="name">Name:</label>
        <input type="email" class="form-control" id="name" placeholder="Enter name">
      </div>
      <div class="form-group">
        <label for="email">Email:</label>
        <input type="email" class="form-control" id="email" placeholder="Enter email">
      </div>
    </fieldset>
  </form>
</div>

Answer 2

No hay ninguna posibilidad de cómo hacerlo con CSS. CSS puede estilizar solo a hermanos, hijos, etc. no a los padres.

Puedes usar simplemente JS así:

<style>
.parent {background: green}
.focused {background: red;}
</style>
<div class="parent">
    <input class="childInput" type="text" />
    <div class="sibling"></div>
</div>

<script>
$(''.parent > *'')
    .focus(function() {
        $(''.parent'').addClass(''focused'');
    })
    .blur(function() {
        $(''.parent'').removeClass(''focused'');
    });
</script>

http://jsfiddle.net/C4bZ6/

Este código toma todos los hijos directos de .parent y, si enfoca a uno de ellos, el focused clase se agrega a los padres. En el desenfoque, esta clase se elimina.

Answer 3

Prueba el atributo contenteditible. Sin embargo, esto puede requerir más trabajo para convertirlo en datos de formulario utilizables.

http://jsfiddle.net/michaelburtonray/C4bZ6/20/

<span class="parent" contenteditable>Click me</span>

Answer 4

Puedes usar CSS puro para que la entrada de texto parezca que no es una entrada de texto a menos que esté enfocada

http://jsfiddle.net/michaelburtonray/C4bZ6/13/

input[type="text"] {
    border-color: transparent;
    transition-duration: 600ms;
    cursor: pointer;
    outline-style: none;
    text-overflow: ellipsis;
}

input[type="text"]:focus {
    border-color: initial;
    cursor: auto;
    transition-duration: 300ms;
}