Google translate, placeholder text in input type='text'

Question

Problem translating placeholder text in input type="text"

This is my sample code:

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 example is in

JSFiddle:

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

Please mention any other way to translate placeholder text using google translate

Cower

The jsfiddle does not contain any input element. And what do you mean by any other way? Have you found a way? – Frivolous

jsfiddle example containe only translate function, i tested with adding <input type="text" placeholder= "Enter your name" /> in it, that is not working for me, my real implementation also use the same way – Cower

Answer 1

As stated in previous answers, Google Translate does not translate placeholders.

I found this javascript solution and it does work.

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

Continuity

Answer 2

As long as Google Translate does not want to translate a placeholder attribute (and they suggest no way to ask for it), the answer is “you can’t”.

As a workaround, you could put the placeholder text into a normal element, say a label element, and then, with JavaScript, after translation copy its content into a placeholder attribute and delete the normal element.

However, it is much better to avoid creating the problem and simply use a label element instead of the placeholder attribute in a situation where you would use the latter in the rôle of a label – against the HTML5 CR which clearly says: “The placeholder attribute should not be used as a replacement for a label.”. So simply use normal markup and have it normally (mis)translated by Google:

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

Frivolous

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>

Vicar

please add some explanatory notes to your post, showing how your code somves the problem and what the OP was missing or getting wrong – Desantis

This is just google translate example.. not helped with placeholder text translating – Cower

Same code is not working in IE9 what will be the problem.Share your thoughts. – Ja

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>

Aguilera

what is this, really? – Ostracism