javascript - validacion - Icono seleccionable dentro del campo de entrada

validar formulario javascript html5

Question

Tengo un campo de entrada de búsqueda con una lupa dentro del cuadro como imagen de fondo.

Lo que estoy tratando de hacer es hacer que se pueda hacer clic en la lupa para enviar el formulario.

El icono está dentro del campo de entrada de texto a la derecha del campo.

Si ayuda, el sitio utiliza jquery y blueprint css framework.

Answer 1

2017 actualización CSS3 HTML5 (y opcionalmente bootstrap)

jsfiddle

jsfiddle con casilla de verificación

No me gustó la estética de la respuesta actual, cualquiera que llegue aquí en busca de una solución que use bootstrap o tipografía impresionante (o su propio gráfico SVG).

El ejemplo funciona sin bootstrap, sin embargo, el icono de fuente para el símbolo de búsqueda no estará allí.

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>

Agregue un controlador para que el ícono haga que ocurra una acción de envío como se desea, esto está más allá del alcance de esta pregunta, aunque ...

Answer 2

Esto puede parecer un poco excesivo pero funciona en mi aplicación.

Aquí está mi solución:

;(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);

Entonces llámalo como cualquier otro plugin:

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

Desde aquí puede enganchar fácilmente en el evento de clic de anclaje o simplemente cambiarlo a un botón de envío

Answer 3

Hacer que una imagen de fondo active un envío de formulario no es bonito.

Un mejor enfoque es colocar un botón de envío regular fuera de la entrada, luego diseñar cosas para que parezca que el botón está dentro. Esto también preservará la accesibilidad (por ejemplo, los usuarios ciegos podrán usar su sitio web), y al presionar Enter enviará su formulario automáticamente en todos los navegadores.

Vea el código a continuación, o visite este jsFiddle para una prueba de concepto que funcione.

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

Answer 4

No puede agregar un evento de clic solo en una parte de una imagen de fondo en su campo de entrada.

Sin embargo, puede utilizar el evento de clic en el campo de texto de entrada y calcular en función de la posición del mouse cuando se produce el clic, si el clic es en la parte buena de la imagen de fondo, pero eso es bastante complicado y la posición del mouse En comparación con el texto de entrada puede variar en el navegador diferente.

PD: Lo que haría sería diseñar el campo de entrada con una imagen a continuación. Por ejemplo, mire este campo de entrada para la búsqueda: http://www.gamefront.com/

[EDITAR] Aquí una muestra, probada solo con Mozilla. Como dije antes, necesitas jugar con el píxel (distanceFromTop, distanceFromLeft, inputWidth, inputHeight, pictureWitdh) para encontrar el lugar adecuado: 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)" />

Answer 5

Simplemente haga un tipo de entrada = "imagen" de una lupa y haga un índice z arriba, posición: absoluta, y luego muévala con los márgenes.