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.

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.

• javascript
• jquery
• html
• angularjs
• d3.js

• 5 placeholder is not an event, what do you expect? You are using jQuery, it has attr method, attr('placeholder', 'newValue') – Ram Commented Jun 16, 2014 at 18:18
• the problem is that I'm using angular controllers...I have a controller where I am trying to change the placevalue of input fields in the view file. I think this should work: d3.select(".classNameofInputField").attr("placeholder", "hello"); but it doesnt work.. – es3735746 Commented Jun 16, 2014 at 18:22
• I have provided an answer in jQuery where there're event listeners such that whenever the value of an input is updated, the placeholder will be updated automatically. – PeterKA Commented Jun 16, 2014 at 18:34
• 1 A placeholder is meant to describe the generic pattern of expected input, not some specific value. If you have a useful default value e.g. from previous input, make it the default by putting it into the value attribute (property) and omit the placeholder attribute as not needed. – Jukka K. Korpela Commented Jun 16, 2014 at 19:20

6 Answers 6

I can't ment 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.

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

Yes you can do it in this way ,

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

here's a fiddle: http://jsfiddle/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');

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

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.