如何动态翻译 html5 占位符

Posted 2023-03-13

【中文标题】如何动态翻译 html5 占位符

【英文标题】：how to translate the html5 placeholders dynamically

【发布时间】：2014-01-28 07:15:21

【问题描述】：

我正在使用 angular-translate 将页面内容翻译成不同的语言。

<input  type ='text' placeholder = ' username | translate'>

当页面加载时这工作正常..但是当我使用 $translate.uses('fr') 时它无法翻译，具体取决于语言下拉列表的变化。

任何人都可以建议在语言动态变化时翻译占位符的解决方案吗？

【问题讨论】：

用户名必须是字符串，所以你有：

【参考方案1】：

你试过了吗：

<input type="text" placeholder=" 'my.i18n.key' | translate " ng-model="myModel">

【讨论】：

对我来说没有.. 不翻译运行时

对我来说它不起作用，问题出现在你在运行时而不是在开始时。

这种方法已弃用，见@armyofda12mnkeys的回答，有翻译占位符的指令

这在 Internet Explorer 上不起作用，文档对这一点非常清楚。进行插值时会出现错误/崩溃。您应该根据需要使用自定义占位符指令来处理它

这个答案很接近，但从技术上讲，使用 ng-attr-placeholder 作为属性是更好的做法，因为这样 Angular 可以推迟显示该值，直到它真正准备好（在翻译之后）。使用原始placeholder 属性时的卡顿通常非常快，以至于您看不到它，但是如果您像发布的答案那样操作，用户可能会暂时看到未翻译的密钥。

【参考方案2】：

在 angular-translate 中有一个指令可以帮助解决这个问题。 见this issue。

<input placeholder="Regular Placeholder" translate translate-attr-placeholder="text" translate-value-browser="app.browser">

这是来自该线程的工作 plunkr 的预览： http://plnkr.co/edit/J4Ai71puzOaA0op7kDgo?p=preview

【讨论】：

这是翻译占位符属性的最佳方案。

【参考方案3】：

+ira 的解决方案对我有用。

<input type ='text' placeholder = "'USERNAME' | translate">

其中用户名是翻译的关键。因此，翻译 JSON 行在西班牙语中可能如下所示

"USERNAME": "Nombre",

两者一起将Nombre作为输入框内的占位符

【参考方案4】：

我用这个方法：

在 en.json 中：

   "ENTER_TEXT": "label را وارد کنید",
   "DISCOUNT_CODE": "کد تخفیف"

在模板中：

<input type="text" placeholder="'ENTER_TEXT' | translate: label: 'DISCOUNT_CODE' | translate " >

【参考方案5】：

我使用了 placeholder=" 'some_text' | translate " 而不是 placeholder=" "some_text" | translate " 对我有用