谷歌翻譯，在輸入類型= '文本'

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

只要谷歌翻譯不想翻譯placeholder屬性（他們建議沒有辦法要求），答案是「你不能」。

作爲一種變通方法，你可以把佔位符文本到一個正常的元素，比方說label元素，然後，使用JavaScript，翻譯後複製其內容爲placeholder屬性，刪除正常的元素。

但是，它是更好的，以避免產生此問題，只需在一個情況下，你會用後者在標籤中的角色使用label元素，而不是placeholder屬性 - 對HTML5 CR其中明確says： 「佔位符屬性不應該被用作標籤的替代品。」因此，簡單地用正常的標記，並讓它正常（MIS）由谷歌翻譯：

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

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

Answer 3

正如前面的答案，谷歌翻譯不翻譯佔位符

在谷歌上搜索，發現這個JavaScript的解決方案，它確實工作。 http://gamon.org/blog/2015/03/12/translate-placeholders-with-google-translate-widget/

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