placeholderに翻訳機能を適用させる

placeholderによって指定された文字列はそのままだと翻訳の対象とならずページ全体を翻訳してもそこだけ無視されてしまう。 そこで、stackoverflowにあった処理を行ったら上手くいったのでまとめておく。

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

簡単に原理を説明するとplaceholder内の文字列を取り出し、それをtextとした隠れたdiv要素を作成して翻訳させたあと、 再度placeholderに適用させる、といったところ。 サイトはこちら