动态更改输入字段的占位符？

Question

我正在使用 Javascript 和 d3 库以及 AngularJS。

有没有办法动态更改输入框的占位符？ 我正在使用日历小部件和多个视图，想看看是否有办法让占位符始终是最后输入到字段中的值。

我写了一个小函数，它总是返回输入字段的最后一个东西……但是当我尝试设置 placeholder=functionIwrote() 时，它实际上使占位符“fucntionIwrote()”而不是运行该函数。

Answer 1

我无法发表评论，但是...如果您使用 angularJs，您只需将输入模型绑定到占位符即可！

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

这样，您的输入将始终是最新的填充值。

如果你想改变你的视图，然后检索数据，那么你必须将它们存储在控制器范围之外——如果你使用 ngIf 指令，每次都会“清理”它。

这样做的一个好方法是使用服务作为持久层。

Answer 2

由于您希望automatically和dynamically更改或更新placeholder ，您可以使用下面的 jQuery 代码：

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

工作 JS 小提琴演示

Answer 3

是的，你可以这样做，

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

Answer 4

这是一个小提琴： http : //jsfiddle.net/bBh3L/

'placeholder' 是一个元素属性，所以你可以使用 $('#myInput').attr(attributeName, attributeValue) 来设置它。

在这种情况下，我映射了按钮单击以使用以下方法更改占位符：

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

Answer 5

我猜你正试图将你的日历小部件包装成一个角度指令，如果是这样，这是我为类似用例所做的（我将接受/有效格式显示为占位符）：

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

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是默认占位符。 不要忘记将表达式括在{{}}方括号中。