如何更改占位符文本的语言？答案

【问题标题】：how to change language for placeholder text?如何更改占位符文本的语言？
【发布时间】：2022-01-21 03:10:45
【问题描述】：

我无法更改占位符文本的语言。我只能更改普通按钮文本、标题文本的语言，但我不能更改占位符文本的语言。请帮助建议我需要在我的代码中添加的任何内容。谢谢

   <!DOCTYPE html>
    <html>
    <head>
        <title>Node.js app</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <link rel="stylesheet" href="Style.css" />
        <script src="https://kit.fontawesome.com/a076d05399.js"></script>
        <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    </head>
    <body>
    
        <label class="switch">
            <input type="checkbox" id="togBtn">
            <div class="slider round">
                <span language='myanmar' class="on">MYN</span>
                <span language='english' class="off">ENG</span>
            </div>
        </label>
    
        <div class="form-group">
            <input type="text" class="form-control usrplaceholder" placeholder="Username" required="required">
        </div>
        <div class="form-group">
            <input type="password" class="form-control pwplaceholder" name="pw" placeholder="Password" required="required">
        </div>
    
        <script>
    
            document.querySelector('#togBtn').addEventListener('input', (event) => {
                document.querySelector('.usrplaceholder').textContent = data[event.currentTarget.checked ? 'myanmar' : 'english'].usrplaceholder;
                document.querySelector('.pwplaceholder').textContent = data[event.currentTarget.checked ? 'myanmar' : 'english'].pwplaceholder;
            });
    
            var data = {
                "english": {
                    "usrplaceholder": "Username",
                    "pwplaceholder": "Password"
                },
                "japanese": {
                    "usrplaceholder": "အသုံးပြုသူအမည်",
                    "pwplaceholder": "စကားဝှက်",
                }
            }
        </script>
    </body>
    </html>

【问题讨论】：

标签： javascript html jquery css

【解决方案1】：

你的代码有两个问题。

首先，您尝试访问不存在的 data 对象的 myanmar 属性。至少在示例代码中，唯一的属性为english 和japanese。

其次，input 元素没有textContent 属性。从上下文来看，您似乎正在尝试设置 placeholder 属性。

document.querySelector('#togBtn').addEventListener('input', (event) => {
  document.querySelector('.usrplaceholder').placeholder = data[event.currentTarget.checked ? 'japanese' : 'english'].usrplaceholder;
  document.querySelector('.pwplaceholder').placeholder = data[event.currentTarget.checked ? 'japanese' : 'english'].pwplaceholder;
});

var data = {
  "english": {
    "usrplaceholder": "Username",
    "pwplaceholder": "Password"
  },
  "japanese": {
    "usrplaceholder": "အသုံးပြုသူအမည်",
    "pwplaceholder": "စကားဝှက်",
  }
}

<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<label class="switch">
  <input type="checkbox" id="togBtn">
  <div class="slider round">
    <span language='myanmar' class="on">MYN</span>
    <span language='english' class="off">ENG</span>
  </div>
</label>

<div class="form-group">
  <input type="text" class="form-control usrplaceholder" placeholder="Username" required="required">
</div>
<div class="form-group">
  <input type="password" class="form-control pwplaceholder" name="pw" placeholder="Password" required="required">
</div>

【讨论】：

哦，明白了！谢谢你罗里:)