Google Translate, tekst zastępczy w input type = 'text'

Question

Problem tłumaczenia tekstu zastępczego w input type="text"

To jest mój przykładowy kod:

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> 

translater przykładem jest

JSFiddle:

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

Powołaj jakikolwiek inny sposób tłumaczyć tekst zastępczy za pomocą Google Translate

Answer 1

Dopóki Tłumacz Google nie chce tłumaczyć atrybutu placeholder (i sugeruje, że nie ma sposobu, aby go o to poprosić), odpowiedź brzmi "nie możesz".

Aby obejść ten problem, można umieścić tekst zastępczy w zwykłym elemencie, na przykład element label, a następnie, po JavaScript, po przetłumaczeniu jego zawartości na atrybut placeholder i usunąć normalny element.

Jednak jest to znacznie lepiej unikać tworzenia problem i po prostu użyć elementu label zamiast atrybutu placeholder w sytuacji, gdy chcesz wykorzystać ten ostatni w roli etykiety - przeciw HTML5 CR który wyraźnie says: "Atrybut zastępczy nie powinien być używany jako zamiennik dla etykiety.". Więc po prostu użyć zwykłego znaczników i mają zwykle (MIS) tłumaczone przez Google:

<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

W poprzedniej odpowiedzi, google translator nie tłumaczy zastępcze

Podczas googlowania, znalazł javascript rozwiązanie i to robi praca. http://gamon.org/blog/2015/03/12/translate-placeholders-with-google-translate-widget/

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