how can i translate html input placeholders dynamically using jQuery?

Question

I can translate the html label dynamically using JQuery, as shown below. On select change, i get the language and translate the label using data-translate

However, I also want to translate the INPUT PLACEHOLDER using the variable dictionary I provided.

Anyone has idea how to do it? Thanks!

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>

Answer 1

You can first check if it's an input with $(element).is('input') and then you'll have to change the placeholder attribute, not the text.

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>