Перевести пользовательские атрибуты с помощью i18next (placeholder, value)

Я изучаю, что возможно с i18next библиотекой локализации.

Сейчас у меня есть следующий код (полный скрипт здесь):

HTML

<div data-i18n="title"></div>
<input placeholder="Hello" value="name">
<div class="holder"></div>
<button class="lang" data-lang="en">Eng</button>
<button class="lang" data-lang="ch">Chi</button>

JS

$(document).ready(function () {
    i18n.init({
        "lng": 'en',
        "resStore": resources,
        "fallbackLng" : 'en'
    }, function (t) {
        $(document).i18n();
    });

    $('.lang').click(function () {
        var lang = $(this).attr('data-lang');
        i18n.init({
            lng: lang
        }, function (t) {
            $(document).i18n();
        });
    });
});

Переводит все элементы text, но проблема в том, что я не могу перевести custom attributes. Например, текст внутри div переводится, но я не могу понять, как я могу перевести пользовательские атрибуты, такие как placeholder и value.

Другая проблема заключается в моем способе перевода. Всякий раз, когда нажимается кнопка Chi, Eng, я инициализирую перевод (но я не уверен, что это правильный путь). Изменить Я думаю, что нашел, как решить эту проблему (мне нужно использовать setLng): i18n.setLng(lang, function(t) { ... })

Ответы

<div data-i18n="[title]titleTransl"></div>
<input data-i18n="[placeholder]placeTransl" value="name">

<input data-i18n="[placeholder]placeTransl" value="name">