Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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

like image 680
UdayaLakmal Avatar asked Dec 13 '13 07:12

UdayaLakmal


People also ask

Is it possible to translate a placeholder in Google Translate?

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

How do I translate from Google Translate to English?

Go to Google Translate. Next to "Detect language," click the Down arrow . Click the language to translate from. Each language has different keyboards. At the bottom left of the white text box, click the Down arrow . Click the keyboard you want to use. The keyboard or drawing area shows below the white text box.

What is placeholder text in input field?

Two input fields with a placeholder text: Definition and Usage. The placeholder attribute specifies a short hint that describes the expected value of an input field (e.g. a sample value or a short description of the expected format). The short hint is displayed in the input field before the user enters a value.

What is the placeholder attribute in HTML?

The placeholder attribute specifies a short hint that describes the expected value of an input field (e.g. a sample value or a short description of the expected format). The short hint is displayed in the input field before the user enters a value.


1 Answers

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();
      });
    }
}
like image 186
PJ3 Avatar answered Sep 29 '22 04:09

PJ3