如何使用 jQuery 动态翻译 html 输入占位符？答案

【问题标题】：how can i translate html input placeholders dynamically using jQuery?如何使用 jQuery 动态翻译 html 输入占位符？
【发布时间】：2018-11-30 09:30:20
【问题描述】：

我可以使用JQuery动态翻译html标签，如下图。在选择更改时，我获取语言并使用数据翻译翻译标签

但是，我还想使用我提供的变量字典翻译 INPUT PLACEHOLDER。

有人知道怎么做吗？谢谢！

jQuery(document).ready(function() {

var dictionary = {
        "en": {
            "login": "Login",
            "username": "Username"
        },
        "kr": {
            "login": "로그인",
            "username": "사용자 이름"
        }
    };
    
    
    var set_lang = function (dictionary) {
        $("[data-translate]").text(function () {
            var key = $(this).data("translate");
            if (dictionary.hasOwnProperty(key)) {
                return dictionary[key];
            }
        });
    };

   // Swap languages when menu changes
    $("#language").on("change", function () {
        var language = $(this).val().toLowerCase();

        if (dictionary.hasOwnProperty(language)) {
            set_lang(dictionary[language]);
        }
    });
    
    // Set initial language to English
    set_lang(dictionary.en);
    
       
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


<div>
     <select id="language">
        <option value="en" selected >English</option>
        <option value="kr">한국어</option>
      </select>
<div>
<br>
<div>
    <label for="username" data-translate="username"> Username</label>
  <input type="text" name="username" id="username" placeholder="Enter username">
</div>

【问题讨论】：

标签： javascript jquery html placeholder translate

【解决方案1】：

您可以先检查它是否是 $(element).is('input') 的输入，然后您必须更改 placeholder 属性，而不是文本。

jQuery(document).ready(function() {

var dictionary = {
        "en": {
            "login": "Login",
            "username": "Username",
            "username_placeHolder" : "Enter Username"
        },
        "kr": {
            "login": "로그인",
            "username": "사용자 이름",
            "username_placeHolder" : "KoreanLang PlaceHldr"
        }
    };
    
    
    var set_lang = function (dictionary) {
        $("[data-translate]").each(function(){
           if($(this).is( "input" )){
              $(this).attr('placeholder',dictionary[$(this).data("translate")] )
           } else{
               $(this).text(dictionary[$(this).data("translate")])
           }
        })
    };

   // Swap languages when menu changes
    $("#language").on("change", function () {
        var language = $(this).val().toLowerCase();

        if (dictionary.hasOwnProperty(language)) {
            set_lang(dictionary[language]);
        }
    });
    
    // Set initial language to English
    set_lang(dictionary.en);
    
       
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


<div>
     <select id="language">
        <option value="en" selected >English</option>
        <option value="kr">한국어</option>
      </select>
<div>
<br>
<div>
    <label for="username" data-translate="username"> Username</label>
  <input type="text" data-translate="username_placeHolder" name="username" id="username" placeholder="Enter username">
</div>

【讨论】：