Dynamically change an input field's placeholder?

Question

I am working with Javascript and the d3 library, and AngularJS.

Is there a way to dynamically change an input box's placeholder? I am working with a calendar widget and multiple views and wanted to see if there was a way to have the placeholder always be the value that was last inputted into the field.

I wrote a small function that always returns the last thing that was entered into the input field...but then when I tried setting placeholder=functionIwrote() it literally makes the placeholder "fucntionIwrote()" instead of running the function.

Answer 1

I can't comment but... If you're using angularJs, you just have to bind the model of your input to the placeholder!

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

This way, your input would always be the latest filled value.

If you want to change your view, and then retrieve datas, then you have to store them outside of the controller scope - which is "cleaned" every time if you're using the ngIf directive -.

A good way to do this is to use a service as persistance layer.

Answer 2

Since you want the placeholder to be changed or updated both automatically and dynamically , you may use the jQuery code below:

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

WORKING JS FIDDLE DEMO

Answer 3

Yes you can do it in this way ,

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

Answer 4

here's a fiddle: http://jsfiddle.net/bBh3L/

'placeholder' is an element attribute, so you can use $('#myInput').attr(attributeName, attributeValue) to set it.

In this case, I mapped the button click to change the placeholder using:

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

Answer 5

I guess that you're trying to wrap your calendar widget into an angular directive, if so, here's what I did for a similar use case (I display the accepted/valid format as placeholder):

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);
      });
    }
  };
}]);

Answer 6

There exists a conditional attribute property in AngularJS ng-attr-{property_name}

For example, I'm using different placeholders for different search options using

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

Here on the basis of isAdvanceSearch variable, I'm setting different placeholders in setPlaceholder method.

setPlaceholder method returns the placeholder to set in the input field.

$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";
     }
};

Note: John Smith, 08/23/1970, 123 is the default placeholder. Don't forget to wrap the expression in the {{}} brackets.