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