[英]Google translate, placeholder text in input type='text'
Problem translating placeholder text in input type="text"
在
input type="text"
转换占位符文本时出现问题
This is my sample code: 这是我的示例代码:
Html: 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: 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: 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: JSFiddle:
http://jsfiddle.net/ulak/zDUYL/ http://jsfiddle.net/ulak/zDUYL/
Please mention any other way to translate placeholder text using google translate 请提及使用Google翻译翻译占位符文本的其他方法
As stated in previous answers, Google Translate does not translate placeholders. 如先前的回答所述,Google翻译不翻译占位符。
I found this javascript solution and it does work. 我找到了这个javascript解决方案,它确实有效。
http://gamon.org/blog/2015/03/12/translate-placeholders-with-google-translate-widget/ http://gamon.org/blog/2015/03/12/translate-placeholders-with-google-translate-widget/
JSfiddle demo here : JSfiddle演示在这里 :
// 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();
});
}
}
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”. 只要Google Translate不想翻译
placeholder
属性(并且他们建议不提出要求),答案就是“你做不到”。
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. 解决方法是,可以将占位符文本放入普通元素(例如
label
元素)中,然后在翻译后使用JavaScript将其内容复制到placeholder
属性中,然后删除normal元素。
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.”. 但是,最好避免产生问题,并在需要在
label
使用后者的情况下,仅使用label
元素代替placeholder
属性–相对于HTML5 CR而言,HTML5 CR明确指出 :“ placeholder属性不应代替标签。”。 So simply use normal markup and have it normally (mis)translated by Google: 因此,只需使用普通标记并由Google正常翻译即可:
<label for=name>Your name:</label> <input type="text" id=name>
<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>
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.