web-dev-qa-db-fra.com

Icône cliquable dans le champ de saisie

J'ai un champ de recherche avec une loupe à l'intérieur de la boîte comme image d'arrière-plan. 

Ce que j'essaie de faire est de rendre la loupe cliquable pour soumettre le formulaire. 

L'icône est à l'intérieur du champ de saisie de texte à droite du champ. 

Si cela peut aider, le site utilise les frameworks jquery et blueprint css.

javascriptjqueryhtmlcss
26
applechief

Faire en sorte qu'une image d'arrière-plan déclenche l'envoi d'un formulaire n'est pas joli.

Une meilleure approche consiste à placer un bouton de soumission régulier en dehors de l'entrée, puis de styliser les éléments pour que le bouton ressemble à l'intérieur du bouton. Cela préservera également l'accessibilité (par exemple, les utilisateurs aveugles pourront utiliser votre site Web). Si vous appuyez sur Entrée, votre formulaire sera automatiquement soumis à tous les navigateurs.

Voir le code ci-dessous ou consultez this jsFiddle pour une preuve de concept fonctionnelle.

<style type="text/css">
.search_field {
    display: inline-block;
    border: 1px inset #ccc;
}

.search_field input {
    border: none;
    padding: 0;
}

.search_field button {
    border: none;
    background: none;
}
</style>

<div class="search_field">
    <input name="q" />
    <button type="submit"><img src="magnifying_glass.png" alt="Search" /></button>
</div>
44
Søren Løvborg

Mise à jour 2017 CSS3 HTML5 (et éventuellement bootstrap)

 input picture

jsfiddle

 input with tick

jsfiddle avec case à cocher

Je n'aimais pas l'esthétique de la réponse actuelle, quiconque arrive ici cherchant une solution utilisant soit bootstrap, soit font-awesome (ou votre propre graphique SVG). 

L'exemple fonctionne sans bootstrap, mais l'icône de police pour le symbole de recherche ne sera pas là.

css 

html {
  /* to make rem sizes behave */
  font-size: 10px;
}

.input-with-icon {
  /* causes absolute icon div to be positioned correctly */
  position: relative;

  width: 25rem;
  height: 3.2rem;
  box-sizing: border-box;
}

.input-with-icon .form-control {
    height: 100%;
    width: 100%;
    padding-right: 3.65rem;
    box-sizing: border-box;
}

.input-with-icon .icon {
  position: absolute;

  /* These are set relative to the height of the input box to bound the box neatly inside. This is aesthetic to me but you may change the dimensions of course. */
  right: 0.3rem;
  top: 0.3rem;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 0.3rem;

  /* content in the icon div is centered, without bootstrap or font-awesome you may wish to add your own text in the span */
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}

html

<div class="input-with-icon">
  <input type="text" class="form-control" value="thing">
  <div class="btn btn-default icon"><span class="glyphicon glyphicon-search"></span>
  </div>
</div>

Ajoutez un gestionnaire pour que l'icône déclenche une action de soumission comme vous le souhaitez. Cela n'entre pas dans le cadre de cette question ...

2
coderatchet

Il suffit de faire une entrée type = "image" d'une loupe et l'index z ci-dessus, position: absolute, puis déplacez-le avec des marges.

1
sir_thursday

Vous ne pouvez pas ajouter un événement de clic uniquement sur une partie d'une image d'arrière-plan de votre champ de saisie.

Cependant, vous pouvez utiliser l'événement click sur le champ de saisie et calculer en fonction de la position de la souris lorsque le clic survient, si le clic est bien sur la bonne partie de l'image d'arrière-plan, mais que c'est assez compliqué et que la position de la souris par rapport au texte saisi, cela varie d’un navigateur à l’autre.

PS: Ce que je voudrais faire est de concevoir le champ de saisie avec une image suivante. Par exemple, regardez ce champ de saisie pour la recherche: http://www.gamefront.com/

[EDIT] Voici un échantillon, testé uniquement avec Mozilla. Comme je l'ai dit précédemment, vous devez jouer avec le pixel (distanceFromTop, distanceFromLeft, inputWidth, inputHeight, pictureWitdh) pour trouver le bon emplacement: http://Pastebin.com/00rWTadz

<script type="text/javascript">
    var tempX = 0;
    var tempY = 0;

    document.onmousemove = getMouseXY;

    function getMouseXY(e) {
            tempX = e.pageX;
            tempY = e.pageY;

            // catch possible negative values in NS4
            if (tempX < 0){tempX = 0}
            if (tempY < 0){tempY = 0}

            // show the position values in the form named Show
            // in the text fields named MouseX and MouseY
            document.getElementById('MouseX').value = tempX;
            document.getElementById('MouseY').value = tempY;
            return true;
    }

    function search(){
            // position of input field
            var distanceFromTop = 60;
            var distanceFromLeft = 8;

            // size of input field
            var inputWidth = 204;
            var inputHeight = 20;

            // size of picture
            var pictureWitdh = 20;

            // dont need to check mouse position on axis y
            // because onclick event already is on input field

            // check mouse position on axis x
            if(tempX > (distanceFromLeft+inputWidth-pictureWitdh)){
                    alert('Did click on the right');
            }
    }
</script>
<input type="text" id="MouseX" value="0" size="4"> X<br>
<input type="text" id="MouseY" value="0" size="4"> Y<br>
<input type="text" id="search" onclick="search(this)" />
1
zzarbi

Cela peut sembler un peu exagéré, mais cela fonctionne dans mon application.

Voici ma solution:

;(function($) {
$.fn.inputButton= function() {

        return this.each(function() {
            $input = $(this);

            $input
                .css({"padding":"0 25px 0 0"})
                .after("<a style=\"margin:0 0 0 -20px;\" href=\"#\">btn</a>")

            ;

        });
};})(jQuery);

puis appelez-le comme n'importe quel autre plugin:

<script type="text/javascript">$('.link').inputButton();</script>
<input class="link" />

À partir de là, vous pouvez facilement vous connecter à l'événement de clic d'ancrage ou simplement le remplacer par un bouton d'envoi.

0
Tricky