使用 18 nextjs 翻译占位符值

Question

我写了一个代码来将应用程序从 en-US 翻译成 id-ID。它成功翻译了 div、p、span 和 a 标签元素，但是它没有翻译 placeholder 值。
这是我的代码：

<script src="js/i18next-1.10.1.min.js"></script>
<div class="row-fluid" id="loginfb">
            <span class="pull-left" id="iconbox"><i class="fa fa-facebook" id="icon"></i></span>
            <span class="form-control text-center" id="log_fb_msg"></span>
        </div>
        <div class="row-fluid" id="loginGmail">
            <span class="pull-left" id="iconbox"><i class="fa fa-facebook" id="icon"></i></span>
            <span class="form-control text-center log_gmail_msg" id="log-gmail-msg">Login with Gmail</span>
        </div>
        <div id="top">
            <hr class="line_colr" id="right_or_line">
            <div id="textrow">
                <span class="text-center" id="or_span" </span>
            </div>
            <hr class="line_colr" id="left_or_line">
        </div>
        <h5 style="text-align: center; color: red;" id="validation"></h5>
        <div class="row-fluid" id="mail">
            <input type="text" class="form-control text text-center" id="mail_or_name" data-i18n="[placeholder]mail_or_name" placeholder="Email or Username">
        </div>
        <div class="row-fluid" id="passwordmail">
            <input class="form-control text text-center" type="password" id="pass_span" placeholder="Password">
        </div>
        <div id="forgotpwd">
            <span id="forgot_pass_span"><a id="link" href="#"></a></span>
        </div>
        <div class="row-fluid" id="signin">
            <span class="form-control text-center blue_clr yelw_color" id="sign_in"></span>
        </div>
        <div id="createAccount">
            <span id="create_new_acc"><a id= "registerLink" href="#">CREATE NEW ACCOUNT</a></span>
        </div>  

<script>
    $.i18n.init({
        //lng: 'en-US',
        ns: {
            namespaces: ['ns.common', 'ns.special'],
            defaultNs: 'ns.special'
        },
        useLocalStorage: false,
        debug: true
    }, function(t) {
        $('#add').text($.t('ns.common:add'));
        $('#appname').text($.t('app.name'));
        $('#log_fb_msg').text($.t('app.log_fb_msg', {
            log_fb_msg: ''
        }))
        $('#or_span').text($.t('app.or_span', {
            or_span: ''
        }))
        $('#link').text($.t('app.link', {
            link: ''
        }))
        $('#sign_in').text($.t('app.sign_in', {
            sign_in: ''
        }))
        $('#registerLink').text($.t('app.registerLink', {
            registerLink: ''
        }))
        $('.log_gmail_msg').text($.t('app.log_gmail_msg', {
            log_gmail_msg: ''
        }))
        /*$("input[placeholder]").val = $.t('app.sd', {
                pvalue: ''
            });*/

        $("input[placeholder]").val(function() {
            var pvalue = $(this).attr("placeholder");
            alert($.t('app.sd', {
                pvalue: ''
            }));
            $('pvalue')($.t('app.sd', {
                pvalue: ''
            }))
        });
            /*$('#registerLink').text("BUAT AKUN BARU");*/
    });
    </script>

我的 ns.special.json 是：

{
    "app": {
        "name": "i18n",
        "register": " DAFTAR __register__",
        "username": "nama pengguna __username__",
        "congrats": "Selamat! __congrats__",
        "welcome": "Selamat Datang di Bistip Aplikasi Mobile __welcome__",
        "please"  : "Lengkapi profil Anda, sehingga Anda __please__",
        "post"    : "posting yang ditampilkan pada timeline. __post__",
        "continue_span" : "LANJUTKAN __continue_span__",
        "log_fb_msg" : "Masuk dengan Facebook __log_fb_msg__",
        "or_span" : " Atau __or_span__",
        "link" : "lupa kata sandi? __link__",
        "sign_in" : "MASUK __sign_in__",
        "header_msg" : "REKENING __header_msg__",
        "profile" : "Profil __profile__",
        "hover_my_trip" : "Saya Perjalanan __hover_my_trip__",
        "review" : "Ulasan __review__",
        "payout" : "Pembayaran __payout__",
        "warning" : "Tidak ada diposting perjalanan ditemukan! __warning__",
        "leftcolumn" : "Menyerahkan __leftcolumn__",
        "rightcolumn" : "Membatalkan __rightcolumn__",
        "registerLink" : "BUAT AKUN ANDA __registerLink__",
        "log_gmail_msg" : "Masuk dengan Gmail __log_gmail_msg__",
        "sd": "Email atau nama pengguna __mail_or_name__"
    },
    "placeHolder": {
        "mail_or_name": "Email atau nama pengguna __mail_or_name__"
    }
}

问题是当我将 setLng 设置为 id-ID 时，占位符值显示为警告，但它们不会在页面上翻译。其余的一切工作正常。如何修改我的代码以翻译占位符？

Answer 1

得到解决方案。我写了这样的代码：

$('#text_pswrd_conf').attr("placeholder",$.t('app.pwordConf'));

其中#text_pswrd_conf是需要input text的id。 pwordConf 是 ns.special.json

的翻译值

Answer 2

鉴于您的 ns.special.json 文件，占位符的键应该是 placeHolder.mail_or_name

使用 18 nextjs 翻译占位符值

Traslating placeholder values by using 18next js

javascript

jquery

html

internationalization

i18next