如何更改输入标签占位符的语言？
[英]How can I change language on placeholder of a input tag?
问题描述
我想添加一个翻译切换按钮，它将在表单的两种语言之间进行翻译。 我可以 select html 标签，但我怎么能 select 占位符在输入标签内。 我已经使用 document.querySelector 到 select 我添加的自定义类仅用于更改语言。 我还在输入字段中添加了自定义 class 但无法更改抓取占位符文本。 这是我的 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 个解决方案
解决方案1
0 2021-12-10 01:55:22
我可以使用开发工具控制台以这种方式更新您的占位符：
var attr = "bangla"
emailText = document.querySelector('#email')
emailText.placeholder = data.bangla.emailLabel
如何使用 Element UI 从我的 el-input 更改占位符颜色
[英]How can I change the placeholder color from my el-input with Element UI
使用 Javascript 单击锚标记时，如何更改输入标记的值、名称和占位符？
[英]How to change value, name and placeholder of an input tag when an anchor tag is clicked using Javascript?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.