CODEWITHSUNDEEP
javascriptjqueryhtmlangularjsd3.js
es3735746
es3735746

Reputation: 851

Dynamically change an input field's placeholder?

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.

Upvotes: 0

Views: 16736

Answers (6)

Asad Shakeel
Asad Shakeel

Reputation: 2285

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.

Upvotes: 0

Praveen Rana
Praveen Rana

Reputation: 440

Yes you can do it in this way , 

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

Upvotes: 1

glepretre
glepretre

Reputation: 8167

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

Upvotes: 0

PeterKA
PeterKA

Reputation: 24638

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

Upvotes: 1

Nico
Nico

Reputation: 263

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.

Upvotes: 1

Dave Briand
Dave Briand

Reputation: 1734

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

Upvotes: 0

Related Questions