Question

在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-simple{background-color:green;}
    div#google_translate_element div.goog-te-gadget-simple a.goog-te-menu-value span{color:yellow}

    div#google_translate_element div.goog-te-gadget-simple a.goog-te-menu-value span:hover{color:#ffffff}
</style>

翻译示例在

中

的jsfiddle：

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

请提及使用谷歌翻译

翻译占位符文本的任何其他方式

Answer 1

如前所述，Google翻译并未翻译占位符。

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

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

JSfiddle demo 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();
      });
    }
}

Answer 2

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

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

但是，最好避免创建问题，只需使用label元素而不是placeholder属性，以便在标签的rôle中使用后者。显然says的HTML5 CR：“占位符属性不应该用作标签的替代品。”因此，只需使用普通标记，并由Google正常（错误）翻译：

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

Answer 3

<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>

Answer 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>

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

4 个答案: