translator
We make a web application and some customers had problems caused by the Firefox translator. Specifically it translates the content of hidden input fields like this: <input name="ACTION" id="ACTION" type="hidden" value="login" translate="no" data-translate="false"/> causing the application to not work anymore. (the translator changed the word "login" to "login in und in").
Note the 2 attributes I have added in the html, which DON'T prevent translation.
The input field is inside this block: <body class="notranslate">
class="notranslate" seems to prevent translation of the various labels inside the body, but NOT of the value of the hidden input field.
As it is a multilanguage application (the users can change the language inside the application), I would like to entirely disable translation by the browser for this web site. Can this be done using certain tags or attributes? At least I would like that the content of input fields is not modified by the translator. Is that possible?
所有回复 (2)
o prevent browser translators from altering the content of input fields, especially hidden ones, there are a few approaches you can take to minimize issues with tools like the Firefox translator:
1. Disable Translation for the Whole Page You can disable translation for the entire webpage by using the HTML translate attribute on the <html> tag:
html Copy code <html translate="no"> This should instruct the browser's built-in translation services (such as Google Translate or Firefox’s built-in translator) not to translate any part of the webpage, including input fields.
2. Disable Translation for Specific Elements For individual elements, you can use the translate="no" attribute. Although you’ve already applied this attribute to the input fields, make sure that it’s placed at the correct levels in the hierarchy:
html Copy code <input name="ACTION" id="ACTION" type="hidden" value="login" translate="no" /> Sometimes, adding it to parent elements or the form itself can help:
html Copy code <form translate="no">
<input name="ACTION" id="ACTION" type="hidden" value="login" />
</form> 3. Use Content Security Policy (CSP) You can use a Content Security Policy (CSP) to block browser translation services entirely. Set the following HTTP header to prevent third-party translation services:
plaintext Copy code Content-Security-Policy: script-src 'self'; object-src 'none'; However, this does not prevent internal translation services (like Firefox's built-in translator).
4. Meta Tags for Translation Some web applications use meta tags to indicate to browsers that translation is unnecessary:
html Copy code <meta name="google" content="notranslate"> This tag was originally intended for Google Translate but is respected by many modern browsers.
5. Testing for Translator-Specific Issues Sometimes, browser-specific behavior can cause translation issues. You may need to handle them through testing and specific bug reports. In some cases, browsers like Firefox can have specific flags or issues related to translation that require workarounds, or their behavior could change in future updates.
By implementing the methods above, you should be able to either fully disable browser translation for your site or at least prevent unwanted translation of input fields. If the issue persists with a specific browser (such as Firefox), updating the browser or filing a bug report may also be useful.
由cor-el于修改
Thank your much for the answer. I have tried it. To 1: probably you meant translate="no" inside the html tag. I have given it. To 2: I have added translate="no" both to the form element and to the input element. To 4: I have added this inside the head element (which is inside the html element): <meta name="google" content="notranslate"> but it does not disable the "translate page" menu item (should it?), nor does any of these measures prevent translating the content of the above hidden input from "login" to "login in und in" Could it be a bug? P.S. I have Firefox 130.0