Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 04.12.2015, 10:08
Аспирант
Отправить личное сообщение для Mrs.Haneki Посмотреть профиль Найти все сообщения от Mrs.Haneki
 
Регистрация: 16.04.2014
Сообщений: 59

Показывать иконку когда input в фокусе
Доброе утро! помогите пожалуйста скорректировать код. Когда поле в фокусе, то показываем иконку и отчищаем введенный текст. когда не в фокусе то убираем. Я написала код, он показывает и убирает иконку, но не очищает текст. Хотя событие на очистку поля стоит.

Идеально сделать бы как в поиске Яндекс. когда ввели текст, то появляется кнопка очистить

<input id="searchDeliverySector" name="searchDeliverySector" type="text" class="form-control" maxlength="500">
            <span class="btn-clear" onclick="ClearSearchFields(['searchDeliverySector']); searchDepartments();" style="display: none;">
                <img src="/Content/Images/icon-clear.png" alt="">
            </span>


$(document).ready(function () {
        $('#searchDeliverySector').focus(function () {
            $('span.btn-clear').show();
        });

        $('#searchDeliverySector').blur(function () {
            $('span.btn-clear').hide();
        });
    });

Последний раз редактировалось Mrs.Haneki, 04.12.2015 в 10:23.
Ответить с цитированием
  #2 (permalink)  
Старый 04.12.2015, 10:11
Аспирант
Отправить личное сообщение для Mrs.Haneki Посмотреть профиль Найти все сообщения от Mrs.Haneki
 
Регистрация: 16.04.2014
Сообщений: 59

см скрин
Изображения:
Тип файла: jpg input.jpg (3.4 Кб, 3 просмотров)
Ответить с цитированием
  #3 (permalink)  
Старый 04.12.2015, 10:29
Аспирант
Отправить личное сообщение для Mrs.Haneki Посмотреть профиль Найти все сообщения от Mrs.Haneki
 
Регистрация: 16.04.2014
Сообщений: 59

Помогите пожалуйста!
Ответить с цитированием
  #4 (permalink)  
Старый 04.12.2015, 10:53
Аватар для Алексей Петрович
Аспирант
Отправить личное сообщение для Алексей Петрович Посмотреть профиль Найти все сообщения от Алексей Петрович
 
Регистрация: 29.11.2015
Сообщений: 83

.val() В помощь.

HTML:
<span class="btn-clear" onclick="ClearSearchFields('#searchDeliverySector'); searchDepartments();" style="display: none;">


JS:
function ClearSearchFields(id) {
    $(id).val('');
}
Ответить с цитированием
  #5 (permalink)  
Старый 04.12.2015, 10:56
Аватар для Алексей Петрович
Аспирант
Отправить личное сообщение для Алексей Петрович Посмотреть профиль Найти все сообщения от Алексей Петрович
 
Регистрация: 29.11.2015
Сообщений: 83

Название конечно функции странное ClearSearchFields как будто для очистки всей формы. Есть ещё <button type="reset">Reset</button>.
Ответить с цитированием
  #6 (permalink)  
Старый 04.12.2015, 11:08
Аспирант
Отправить личное сообщение для Mrs.Haneki Посмотреть профиль Найти все сообщения от Mrs.Haneki
 
Регистрация: 16.04.2014
Сообщений: 59

Алексей Петрович, увы, но не помогло =( он не успевает очистить, так как скрывается

Последний раз редактировалось Mrs.Haneki, 04.12.2015 в 11:10.
Ответить с цитированием
  #7 (permalink)  
Старый 04.12.2015, 11:15
Аспирант
Отправить личное сообщение для Mrs.Haneki Посмотреть профиль Найти все сообщения от Mrs.Haneki
 
Регистрация: 16.04.2014
Сообщений: 59

function ClearSearchFields(searchDeliverySector) {
	    $('#searchDeliverySector').focus(function () {
	        $('span.btn-clear').show();
	        $('#searchDeliverySector').val('');
	    });

	    $('#searchDeliverySector').blur(function () {
	        $('span.btn-clear').hide();
	    });
	}


правильно написала?
Ответить с цитированием
  #8 (permalink)  
Старый 04.12.2015, 12:06
Аватар для Алексей Петрович
Аспирант
Отправить личное сообщение для Алексей Петрович Посмотреть профиль Найти все сообщения от Алексей Петрович
 
Регистрация: 29.11.2015
Сообщений: 83

А если убрать:
$('#searchDeliverySector').blur(function () {
     $('span.btn-clear').hide();
});

Добавить:
function ClearSearchFields(id) {
    $(id).val('');
    $(this).hide();
}
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Добавление класа к <a> когда не выбран input SLameN Элементы интерфейса 5 14.07.2015 08:31
Нужно связать input и ползунок jQuery Slider / jQuery ui IffeR jQuery 4 16.08.2014 17:01
Когда пользователь вводит в Input значение , меняются radiobutton dreamfactor Общие вопросы Javascript 3 22.10.2013 15:56
При добавлении DOCTYPE "плывут" размеры input type=text Demath (X)HTML/CSS 4 08.07.2012 18:27
Opera не выполняет style.fontSize=... в поле input Маэстро Opera, Safari и др. 6 20.06.2011 11:03