Блог

Главная - Вопросы по программированию - Динамическое изменение заполнителя поля ввода?

Динамическое изменение заполнителя поля ввода?

#javascript #jquery #html #angularjs #d3.js

#javascript #jquery #HTML #angularjs #d3.js

Вопрос:

Я работаю с Javascript и библиотекой d3, а также AngularJS.

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

Я написал небольшую функцию, которая всегда возвращает последнее, что было введено в поле ввода … но затем, когда я попытался установить placeholder=functionIwrote(), она буквально делает заполнитель «functionIwrote()» вместо запуска функции.

Комментарии:

1. placeholder это не событие, чего вы ожидаете? Вы используете jQuery, у него есть attr метод, attr('placeholder', 'newValue')

2. проблема в том, что я использую угловые контроллеры… У меня есть контроллер, в котором я пытаюсь изменить значение места для полей ввода в файле представления. Я думаю, это должно сработать: d3.select(«.classNameofInputField»).attr(«заполнитель», «привет»); но это не работает..

3. Я предоставил ответ в jQuery, где есть прослушиватели событий, так что всякий раз, когда значение an input обновляется, placeholder оно будет обновляться автоматически.

4. Заполнитель предназначен для описания общего шаблона ожидаемого ввода, а не какого-либо конкретного значения. Если у вас есть полезное значение по умолчанию , например, из предыдущего ввода, сделайте его значением по умолчанию, поместив его в value атрибут (свойство) и опустите placeholder атрибут как ненужный.

Ответ №1:

Я не могу комментировать, но… Если вы используете AngularJS, вам просто нужно привязать модель вашего ввода к заполнителю!

 <input type="date" placeholder="myModel" ng-model="myModel" />

Таким образом, ваш ввод всегда будет последним заполненным значением.

Если вы хотите изменить свое представление, а затем получить данные, вам нужно сохранить их за пределами области контроллера, которая «очищается» каждый раз, если вы используете директиву ngIf.

Хороший способ сделать это — использовать сервис в качестве уровня устойчивости.

Комментарии:

1. хммм, я думал, что это будет что-то такое простое, как это … но установка моего заполнителя =»MyModel» буквально устанавливает его в строку MyModel <text class=»dateSelection1″>Из: </text>»StartDate»> <text class=»dateSelection»> На: </text><пользовательский интерфейс ввода-заполнитель даты =»Конечная дата» id =»конечное значение» ng-model=»Конечная дата»> У меня уже есть значения, сохраненные с помощью службы, которая выполняет запросы.

2. О, извините; Я не пробовал 😉 ng-attr-placeholder приведет к вычислению выражения и должен решить вашу проблему. В противном случае вы все равно можете использовать <заполнитель ввода =»{{ MyModel }}» /> . Двойная скобка также приведет к вычислению выражения с угловой двусторонней привязкой 🙂

3. Есть ли способ использовать как обычный заполнитель, так и заполнитель ng? В настоящее время я работаю над поиском ввода .. и когда пользователь ничего не вводит, я хочу, чтобы он говорил «Поиск записей», но затем, когда они что-то вводят, я хочу, чтобы они могли переключаться между представлениями, сохраняя этот поиск во входных данных .. но если они удаляют то, что они ввелиЯ хочу, чтобы он снова сказал «Поиск записей»

4. Вы должны инициализировать привязанную модель со значением по умолчанию. и сбросьте его, когда он очистит ввод — без какого-либо выбора, если это то, что вы хотите —

Ответ №2:

Поскольку вы хотите placeholder , чтобы были изменены или обновлены оба automatically и dynamically , вы можете использовать приведенный ниже код jQuery:

 $(function() {
    $('input').on('change blur', function() {
        !this.value || $(this).attr('placeholder', this.value);
    });
});

РАБОЧАЯ ДЕМОНСТРАЦИЯ JS FIDDLE

Ответ №3:

Да, вы можете сделать это таким образом , 

 <input 
placeholder="Select Date" 
onfocus="(this.type='date')" 
onblur="if (!this.value) this.type = 'text'">

Ответ №4:

вот скрипка: http://jsfiddle.net/bBh3L /

‘placeholder’ — это атрибут элемента, поэтому вы можете использовать $(‘#myInput’).attr(attributeName, AttributeValue), чтобы установить его.

В этом случае я сопоставил нажатие кнопки для изменения заполнителя с помощью:

 $('#myInput').attr('placeholder', 'new one');

Ответ №5:

Я предполагаю, что вы пытаетесь обернуть свой виджет календаря в директиву angular, если да, то вот что я сделал для аналогичного варианта использования (я отображаю принятый / допустимый формат в качестве заполнителя):

 module.directive('yourDirective', [function() {
  return {
    link: function($scope, $element, $attrs, $controller) {

      // bind 'yourValue' (the one you want to show as placeholder) in the scope
      $scope.$watch('yourValue', function(value) {
        $attrs.$set('placeholder', value);
      });
    }
  };
}]);

Ответ №6:

В AngularJS существует свойство условного атрибута ng-attr-{property_name}

Например, я использую разные заполнители для разных параметров поиска, используя

  ng-attr-placeholder="{{isAdvanceSearch ? setPlaceholder(searchOption) : 'John Smith, 08/23/1970, 123'}}"

Здесь, на основе isAdvanceSearch переменной, я устанавливаю разные заполнители в setPlaceholder методе.

setPlaceholder метод возвращает заполнитель для установки в поле ввода.

 $scope.setPlaceholder = function(searchOption) {
     if (searchOption === "foo") {
          return "Search by foo… e.g. foo1";
     } else if (searchOption === "bar") {
          return "Search by bar… e.g. bar123";
     } else {
          return "John Smith, 08/23/1970, 123";
     }
};

Примечание: John Smith, 08/23/1970, 123 является заполнителем по умолчанию.
Не забудьте заключить выражение в {{}} квадратные скобки.