Внутри поля ввода нажмите значок

Ответ 1

Создание триггера фонового изображения для представления формы не очень.

Лучшим подходом является размещение обычной кнопки отправки вне ввода, а затем стиль, чтобы он выглядел так, как будто кнопка внутри. Это также сохранит доступность (например, слепые пользователи смогут использовать ваш сайт), а нажатие Enter будет автоматически отправлять вашу форму во всех браузерах.

Смотрите приведенный ниже код или посмотрите этот jsFiddle для работы с доказательством концепции.

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

Ответ 2

Вы не можете добавить событие клика только на часть фонового изображения в поле ввода.

Однако вы можете использовать событие click в текстовом поле ввода и вычислять в зависимости от положения мыши при щелчке, если щелчок действительно находится на хорошей части фонового изображения, но это довольно сложно и позиция мыши по сравнению с входным текстом будет отличаться в разных браузерах.

PS: Что бы я сделал, это создать поле ввода со следующим изображением. Например, посмотрите на это поле ввода для поиска: http://www.gamefront.com/

[EDIT] Здесь образец, протестированный только с Mozilla. Как я уже говорил, вам нужно сыграть с пикселем (distanceFromTop, distanceFromLeft, inputWidth, inputHeight, pictureWitdh), чтобы найти хорошее место: 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)" />

Ответ 3

Просто введите тип ввода = "изображение" увеличительного стекла и z-индекс вверху, положение: абсолютное, а затем переместите его с полями.

Ответ 4

2017 обновление CSS3 HTML5 (и необязательно бутстрап)

jsfiddle

jsfiddle с галочкой

Мне не понравилась эстетика текущего ответа: любой, кто прибыл сюда, искал решение, используя либо загрузочный, либо шрифтный-удивительный (или собственный SVG-графический файл).

Пример работает без бутстрапа, однако значок шрифта для символа поиска не будет.

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>

Добавьте обработчик для значка, чтобы вызвать действие отправки по желанию, это выходит за рамки этого вопроса, хотя...

Ответ 5

Это может показаться немного переполненным, но оно работает в моем приложении.

Здесь мое решение:

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

затем назовите его, как любой другой плагин:

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

Здесь вы можете легко подключиться к событию щелчка якоря или просто изменить его на кнопку отправки