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

【问题标题】：Dynamically change an input field's placeholder?动态更改输入字段的占位符？
【发布时间】：2014-08-06 15:14:01
【问题描述】：

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

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

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

【问题讨论】：

placeholder 不是一个事件，你期待什么？你正在使用 jQuery，它有 attr 方法，attr('placeholder', 'newValue')
问题是我正在使用角度控制器...我有一个控制器，我试图在其中更改视图文件中输入字段的位置值。我认为这应该有效： d3.select(".classNameofInputField").attr("placeholder", "hello");但它不起作用..
我在 jQuery 中提供了一个答案，其中有事件侦听器，这样每当 input 的值更新时，placeholder 就会自动更新。
占位符旨在描述预期输入的通用模式，而不是某些特定值。如果你有一个有用的 默认值 例如根据之前的输入，通过将其放入 value 属性（属性）使其成为默认值，并在不需要时省略 placeholder 属性。

标签： javascript jquery html angularjs d3.js

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案2】：

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

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

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

如果您想更改视图，然后检索数据，则必须将它们存储在控制器范围之外 - 如果您使用 ngIf 指令，则每次都会“清理” -.

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

【讨论】：

hmmm 我认为它会像这样简单......但是设置我的 placeholder="MyModel" 字面意思将它设置为字符串 myModel From: 收件人：我已经使用进行查询调用的服务存储了值。
哦，对不起；我没有尝试 ;-)ng-attr-placeholder 会导致表达式被评估，并且必须解决你的问题。否则，您仍然可以使用。双括号也会导致表达式被评估，角度双向绑定:-)
有没有办法同时使用常规占位符和 ng 占位符？我目前正在处理搜索输入。当用户没有输入任何内容时，我希望它说“搜索条目”，但是当他们输入内容时，我希望他们能够在视图之间切换，保持搜索在输入中..但是如果他们删除了他们输入的内容，我希望它再次说“搜索条目”
您必须将绑定模型初始化为默认值。并在他清除输入时重置它 - 如果这是你想要的，别无选择 -

【解决方案3】：

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

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

WORKING JS FIDDLE DEMO

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

是的，你可以这样做，

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

【讨论】：

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

【讨论】：