Comment avoir un formulaire d'entrée ciblé avec Bootstrap

Je suis en utilisant Bootstrap 3.0.0 et je veux utiliser le formulaire de saisie:
Voir ici, sous Forme d'États.. focus d'entrée

J'ai utilisé <input class="form-control" id="focusedInput" type="text" value="This is focused..."> ce que concentré, mais je ne suis pas arriver. La Documentation dit d'utiliser :focus de me concentrer, mais je ne sais pas comment.

le code de bootstrap.css

.form-control {
  display: block;
  width: 100%;
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.428571429;
  color: #555555;
  vertical-align: middle;
  background-color: #ffffff;
  border: 1px solid #cccccc;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
          transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

.form-control :focus {
  border-color: #66afe9;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}

source d'informationauteur Lonely

  1. 6

    Ils présent qu'un focus démo. Le #focusedInput styles viennent de docs.css et il est utilisé seulement pour forcer le regard concentré. Qui n'est pas inclus dans le Bootstrap pack, mais seulement dans les pages de documentation, comme vous pouvez le voir dans l'écran suivant tirer (voir: docs.css:1072):

    Comment avoir un formulaire d'entrée ciblé avec Bootstrap

    Ensuite, nous devons créer une classe CSS qui auront le concentré de styles:

    .focusedInput {
    border-color: rgba(82,168,236,.8);
    outline: 0;
    outline: thin dotted ;
    -moz-box-shadow: 0 0 8px rgba(82,168,236,.6);
    box-shadow: 0 0 8px rgba(82,168,236,.6) !important;
}

    Maintenant, seulement, y compris focusedInput classe en HTML des éléments d'entrée, vous serez en mesure de mettre l'accent styles pour les non-concentré éléments.

    <input class="form-control focusedInput" type="text" value="This is focused...">

    Voir le JSFIDDLE

    :focus sélecteur est utilisé pour fixer les styles pour mettre l'accent sur l'état de l'entrée.

    JSFIDDLE

    Par exemple:

    #focusedInput:focus {
    background: red;
}

    Ce sera mis en arrière-plan rouge lorsque vous vous concentrez l'entrée.

  2. 20

    Vous pouvez obtenir ce que vous voulez en définissant l'attribut autofocus à l'intérieur de la balise d'entrée à l'autofocus.
    Le clavier d'entrée seront axées sur le champ de saisie et il s'allume.

    <input class="form-control" id="focusedInput" type="text" autofocus="autofocus" value="This is focused...">
  3. 1
    $("#inputID").focus(); //will bring focus
$("#inputID").addClass("focusedInput"); //will give it the bootstrapped focus style
scrollTo("#confirm_deletion"); //actually make browser go to that input

/* scroll to the given element section of the page */
function scrollTo(element)
{
    $('html, body').animate({scrollTop: $(element).offset().top-60}, 500);
}
  4. 1

    Vous avez juste besoin de supprimer l'espace entre les :sélecteur de se concentrer sur le .formulaire de contrôle de la classe.

    .form-control:focus {
  border-color: #66afe9;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}

    JS FIDDLE

  5. 0

    J'ai eu le même problème donc j'ai essayé de chercher sur le css de bootstrap. j'ai dû télécharger un thème de bootswatch et le remplacer avec le bootstrap de sorte que peut être le problème dans mon cas. Enfin, ce que j'ai trouvé était que la form-control:focus avait outline:0 qui signifie qu'il a été désactivation de l'effet de mise au point. j'ai effacé la ligne et a travaillé comme un charme.L'essayer, si quelqu'un a le même problème.Espérons qu'il a aidé.