谷歌翻译，输入类型='文本'中的占位符文本

Posted 2023-03-05

【中文标题】谷歌翻译，输入类型=\'文本\'中的占位符文本

【英文标题】：Google translate, placeholder text in input type='text'谷歌翻译，输入类型='文本'中的占位符文本

【发布时间】：2013-12-31 22:23:44

【问题描述】：

在input type="text" 中翻译占位符文本时出现问题

这是我的示例代码：

HTML：

<div id="google_translate_element" style="float:left; padding-left:15px"></div>


<!-- Need to translate this placeholder text -->

<form><input type="text" placeholder= "Enter your name" />
<input type="submit" value="Submit" />
</form>

JavaScipt：

<script type="text/javascript">
function googleTranslateElementInit() 
        new google.translate.TranslateElement(pageLanguage: 'en', includedLanguages: 'ca,da,de,el,en,es,fr,it,ja,ko,nl,pl,pt,ru,sv,tl', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, 'google_translate_element');

</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

CSS：

<style>
div#google_translate_element div.goog-te-gadget-simplebackground-color:green;
    div#google_translate_element div.goog-te-gadget-simple a.goog-te-menu-value spancolor:yellow

    div#google_translate_element div.goog-te-gadget-simple a.goog-te-menu-value span:hovercolor:#ffffff
</style>

翻译示例在

JSFiddle：

http://jsfiddle.net/ulak/zDUYL/

请提及使用谷歌翻译翻译占位符文本的任何其他方式

【问题讨论】：

jsfiddle 不包含任何input 元素。您所说的任何其他方式是什么意思？你找到方法了吗？

jsfiddle 示例仅包含翻译功能，我在其中添加 进行了测试，这对我不起作用，我的实际实现也使用同样的方式

【参考方案1】：

只要谷歌翻译不想翻译 placeholder 属性（他们建议没有办法要求），答案就是“你不能”。

作为一种解决方法，您可以将占位符文本放入普通元素中，例如 label 元素，然后使用 JavaScript 在翻译后将其内容复制到 placeholder 属性中并删除普通元素。

但是，最好避免产生问题，并在使用 placeholder 属性作为标签角色的情况下简单地使用 label 元素而不是 placeholder 属性 - 针对 html5 CR显然says：“占位符属性不应用作标签的替代品。”。因此，只需使用普通标记并由 Google 正常（错误）翻译：

<label for=name>Your name:</label> <input type="text" id=name>

【参考方案2】：

<div id="google_translate_element"></div><script type="text/javascript">
    function googleTranslateElementInit() 
      new google.translate.TranslateElement(
          pageLanguage: 'en'
          , layout: google.translate.TranslateElement.InlineLayout.SIMPLE
          , 'google_translate_element');
    
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit">
</script>

【讨论】：

请在您的帖子中添加一些解释性说明，展示您的代码如何解决问题以及 OP 遗漏或出错的内容

这只是谷歌翻译示例.. 对占位符文本翻译没有帮助

相同的代码在 IE9 中不工作会是什么问题。分享你的想法。

【参考方案3】：

如之前的答案所述，谷歌翻译不翻译占位符。

我找到了这个 javascript 解决方案，它确实有效。

http://gamon.org/blog/2015/03/12/translate-placeholders-with-google-translate-widget/

JSfiddle 演示 here:

// Find all placeholders
var placeholders = document.querySelectorAll('input[placeholder]');

if (placeholders.length) 
     // convert to array
    placeholders = Array.prototype.slice.call(placeholders);

    // copy placeholder text to a hidden div
    var div = $('<div id="placeholders" style="display:none;"></div>');

    placeholders.forEach(function(input)
      var text = input.placeholder;
      div.append('<div>' + text + '</div>');    
    );

    $('body').append(div);

    // save the first placeholder in a closure
    var originalPH = placeholders[0].placeholder;

    // check for changes and update as needed
    setInterval(function()
      if (isTranslated()) 
        updatePlaceholders();
        originalPH = placeholders[0].placeholder;
      
    , 500);

    // hoisted ---------------------------
    function isTranslated()  // true if the text has been translated
       var currentPH = $($('#placeholders > div')[0]).text();
       return !(originalPH == currentPH);
    

    function updatePlaceholders() 
      $('#placeholders > div').each(function(i, div)
        placeholders[i].placeholder = $(div).text();
      );
    

【参考方案4】：

<div id="google_translate_element"></div>
<script type="text/javascript">
    function googleTranslateElementInit() 
        new google.translate.TranslateElement(
            pageLanguage: 'en',
            includedLanguages: 'ar', 
            layout: google.translate.TranslateElement.InlineLayout.SIMPLE
        , 'google_translate_element');
    
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

【讨论】：

这是什么，真的吗？