如何更改输入标签占位符的语言？
Posted
技术标签:
【中文标题】如何更改输入标签占位符的语言？【英文标题】：How can I change language on placeholder of a input tag? 【发布时间】：2022-01-13 04:25:26 【问题描述】：我想添加一个翻译切换按钮，它将在表单的两种语言之间进行翻译。 我可以选择 html 标签，但如何在输入标签中选择占位符。我已经使用 document.querySelector 来选择我为更改语言添加的自定义类。我还向输入字段添加了自定义类，但无法更改抓取占位符文本。 这是我的html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>language switch using javascript</title>
<link rel="stylesheet" href="./main.css">
</head>
<style>
body
font-family: Roboto, Helvetica, sans-serif;
font-size:20px;
background-color: black;
*
box-sizing: border-box;
/* Add padding to containers */
.container
padding: 16px;
background-color: white;
/* Full-width input fields */
input[type=text], input[type=password]
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
display: inline-block;
border: none;
background: #f1f1f1;
input[type=text]:focus, input[type=password]:focus
background-color: #ddd;
outline: none;
/* Overwrite default styles of hr */
hr
border: 1px solid #f1f1f1;
margin-bottom: 25px;
/* Set a style for the submit button */
.registerbtn
background-color: #04AA6D;
color: white;
padding: 16px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
font-size: 22px;
.registerbtn:hover
opacity: 1;
/* Add a blue text color to links */
a
color: dodgerblue;
/* Set a grey background color and center the text of the "sign in" section */
.signin
background-color: #f1f1f1;
text-align: center;
</style>
<body>
<div class="container">
<div class="langWrap">
<a href="#" language='english' class="active">EN</a>
<a href="#" language='bangla'>BN</a>
</div>
<div class="content">
<form action="">
<div class="container">
<h1 id="h1title" class="lTitle">Register</h1>
<p class="fillUpInstruction">Please fill in this form to create an account.</p>
<hr>
<label for="email" class="emailLabel"><b>Email</b></label>
<input type="text" placeholder="Enter Email" class="emailPlaceHolder" name="email" id="email" required>
<label for="psw" class="passwordLabel"><b>Password</b></label>
<input type="password" placeholder="Enter Password" class="passwordPlaceHolder" name="psw" id="psw" required>
<label for="psw-repeat" class="repeatPasswordLabel"><b>Repeat Password</b></label>
<input type="password" placeholder="Repeat Password" name="psw-repeat" id="psw-repeat" required>
<hr>
<p class="agreementText">By creating an account you agree to our Terms & Privacy
</p>
<a href="#" class="termsPolicy">Terms & Privacy</a>.
<button type="submit" class="registerbtn">Register</button>
</div>
<div class="container signin ">
<p class="questionForExistingAccount">Already have an account?</p>
<a href="#" class="redirectToExistingAccount">Sign in</a>.
</div>
</form>
</div>
</div>
</body>
</html>
这是我更改语言的脚本
<script>
const langEl = document.querySelector('.langWrap');
const link = document.querySelectorAll('a');
const lTitle = document.querySelector('.lTitle');
const fillUpInstruction = document.querySelector('.fillUpInstruction');
const emailLabel = document.querySelector('.emailLabel');
const emailPlaceHolder = document.querySelector('.emailPlaceHolder');
const passwordLabel = document.querySelector('.passwordLabel');
const passwordPlaceHolder = document.querySelector('.passwordPlaceHolder');
const repeatPasswordLabel = document.querySelector('.repeatPasswordLabel');
const questionForExistingAccount = document.querySelector('.questionForExistingAccount');
const agreementText = document.querySelector('.agreementText');
const termsPolicy = document.querySelector('.termsPolicy');
const registerbtn = document.querySelector('.registerbtn');
const redirectToExistingAccount = document.querySelector('.redirectToExistingAccount');
link.forEach(el =>
el.addEventListener('click', () =>
langEl.querySelector('.active').classList.remove('active');
el.classList.add('active');
const attr = el.getAttribute('language');
lTitle.textContent = data[attr].lTitle;
fillUpInstruction.textContent = data[attr].fillUpInstruction;
emailLabel.textContent = data[attr].emailLabel;
emailPlaceHolder.textContent = data[attr].emailPlaceHolder;
passwordLabel.textContent = data[attr].passwordLabel;
passwordPlaceHolder.placeholder = data[attr].passwordPlaceHolder;
repeatPasswordLabel.textContent = data[attr].repeatPasswordLabel;
questionForExistingAccount.textContent = data[attr].questionForExistingAccount;
agreementText.textContent = data[attr].agreementText;
termsPolicy.textContent = data[attr].termsPolicy;
registerbtn.textContent = data[attr].registerbtn;
redirectToExistingAccount.textContent = data[attr].redirectToExistingAccount;
);
);
var data =
"english":
"lTitle": "Register",
"fillUpInstruction": "Please fill in this form to create an account.",
"emailLabel": "Email",
// "emailPlaceHolder": "Enter Email",
"passwordLabel": "Enter Password",
"passwordPlaceHolder": "Enter Password",
"repeatPasswordLabel": "Repeat Password",
"questionForExistingAccount": "Already have an account?",
"redirectToExistingAccount": "Sign In",
"agreementText": "By creating an account you agree to our",
"termsPolicy": "Terms & Privacy",
"registerbtn": "Register",
,
"bangla":
"lTitle": "নিবন্ধন",
"fillUpInstruction": "দয়া করে অ্যাকাউন্টটি তৈরি করতে এই ফর্মটি পূরণ করুন.",
"emailLabel": "ইমেইল",
"passwordLabel": "পাসওয়ার্ড লিখুন",
"passwordPlaceHolder": "পাসওয়ার্ড লিখুন",
"repeatPasswordLabel": "আবারও পাসওয়ার্ড লিখুন ",
"questionForExistingAccount": "ইতিমধ্যে একটি সদস্যপদ আছে? ",
"redirectToExistingAccount": "সাইন ইন ",
"agreementText": "একটি অ্যাকাউন্ট তৈরি করে আপনি আমাদের শর্তাবলী এবং গোপনীয়তার সাথে সম্মত হবেন ।",
"termsPolicy": "শর্তাবলী এবং গোপনীয়তা",
"registerbtn": "নিবন্ধন",
,
</script>
【问题讨论】：
【参考方案1】：我可以使用开发工具控制台以这种方式更新您的占位符：
var attr = "bangla"
emailText = document.querySelector('#email')
emailText.placeholder = data.bangla.emailLabel
【讨论】：
以上是关于如何更改输入标签占位符的语言？的主要内容，如果未能解决你的问题，请参考以下文章
如何在 React Native 中更改 textInput 占位符的字体系列