جواب مینی پروژه تغییر keyCode
سلام
توی مینی ، مینی :) پروژه ایی که داشتیم استاد این رو گفتن که با استفاده از پراپرتی keyCode میتوان مقدار پیشفرض را با مقدار دلخواه جایگزین کرد ولی مشکلی که بود این بود که خود مقدار ان کلید هم اورده میشد که فرمودند این رو میشه به چندین روش تخلیه کرد ، راستش من حدود نیم ساعت تلاش کردم و امتحان کردم ولی نتیجه نداد تا دست به سرچ شدم و توی سایت stackoverflow تونستم یک راه حل براش پیدا کنیم که استفاده از تابع preventDefault هستش ولی فکر کنم باز راه بهتری داشته باشه که ممنون میشم راهنمایی کنید .
<!-- ------------ HTML ------------ -->
<input type="text" onkeydown="keyDown(event)">و کد های جاوا اسکریپت
// ------------ JAVASCRIPTS ------------
var persianchars = {
83: "س"
}
function keyDown(event) {
event.preventDefault();
event.target.value = persianchars[event.keyCode];
}
چیزی که الان متوجه شدم مشکلی که بود با کد های بالا امکان وارد کردن یک کارکتر بیشتر نبود که با اضافه کردن =+ به کد این امر برطرف شد و مشکل بعدیی که داره کد بالا اسپیش را شامل نمیشد که با وارد پیدا کردن کد ان که 32 است اون رو هم اضافه کردم
که کد پایین کاملتره به نظرم :
<!-- ------------ HTML ------------ -->
<input type="text" onkeydown="keyDown(event)">
// ------------ JAVASCRIPTS ------------
var persianchars = {
32: " ",
83: "س",
65: "ش"
}
function keyDown(event) {
console.log(event)
event.preventDefault();
event.target.value += persianchars[event.keyCode];
}
قسمت بک اسپیس هم بنده درست کردم
var a;
function keydown(event){
console.log(event);
if (event.keyCode == 8) {
a = String(event.target.value);
a = a.substring(0, a.length - 1);
console.log(a);
}
else{
event.preventDefault();
}
event.target.value+=language[event.keyCode];
}
var language={
83:'س',
84:'ف',
16:'',
18:'',
8:''
}نمونه کد تمرین که البته میتونه بهتر هم بشه
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Test Page</title>
</head>
<body>
<div style="text-align: center; margin-top: 100px;">
<label for="name">نام خود را وارد کنید</label>
<input type="text" name="name" id="name" onkeydown="checkText(event)" placeholder="کیبورد در حالت انگلیسی باشد">
</div>
<script>
var keyCode = {
32 : ' ',
65 : 'ش',
66 : 'ذ',
67 : 'ز',
68 : 'ی',
69 : 'ث',
70 : 'ب',
71 : 'ل',
72 : 'ا',
73 : 'ه',
74 : 'ت',
75 : 'ن',
76 : 'م',
77 : 'ئ',
78 : 'د',
79 : 'خ',
80 : 'ح',
81 : 'ض',
82 : 'ق',
83 : 'س',
84 : 'ف',
85 : 'ع',
86 : 'ر',
87 : 'ص',
88 : 'ط',
89 : 'غ',
90 : 'ظ',
186 : 'ک',
188 : 'و',
219 : 'ج',
220 : 'پ',
221 : 'چ',
222 : 'گ',
shft72 : 'آ',
shft67 : 'ژ',
};
function checkText(event){
var txt = event.target.value;
console.log(event);
if (keyCode[event.keyCode] && !event.ctrlKey){
event.returnValue = false;
(event.shiftKey && (event.keyCode === 72 || event.keyCode === 67)) ? txt += keyCode['shft' + event.keyCode]: txt += keyCode[event.keyCode];
}else{
txt = event.target.value;
}
event.target.value = txt;
}
</script>
</body>
</html>
<input type="text" onkeydown="languageChanger(event)" />
<p id="textArea"></p><script>
var Farsi = {
32: ' ',
65: 'ش',
66: 'ذ',
67: 'ز',
68: 'ی',
69: 'ث',
70: 'ب',
71: 'ل',
72: 'ا',
73: 'ه',
74: 'ت',
75: 'ن',
76: 'م',
77: 'ئ',
78: 'د',
79: 'خ',
80: 'ح',
81: 'ض',
82: 'ق',
83: 'س',
84: 'ف',
85: 'ع',
86: 'ر',
87: 'ص',
88: 'ط',
89: 'غ',
90: 'ظ',
};
function languageChanger(event) {
if (event.keyCode == 8) {
let newString = document.getElementById('textArea').innerHTML;
newString = newString.substring(0, a.length - 1);
document.getElementById('textArea').innerHTML = newString;
} else
document.getElementById('textArea').innerHTML += Farsi[event.keyCode];
}
</script>+back space & space
قسمت بک اسپیس ساده شده کد توسط محمدامین نیکو
function keydown(event){
console.log(event);
if (event.keyCode != 8) {
event.preventDefault();
event.target.value+=language[event.keyCode];
}
من کد رو به همراه backspace و space نوشتم ولی بدون نیاز به تعریف مجدد اون ها:
کافیه key های لیست رو به صورت number داخل یک لیست جدید بریزیم (چون ب صورت پیش فرض string هستند) بعدش شرط بزاریم اگه keyCode ها توی لیست جدید هستن، کد ترجمه اجرا بشه و اگه نیستن خاصیت خود کلید ها اجرا بشه.
داخل لیست هم فقط دکمه های مشترک فارسی و انگلیسی رو تعریف کنیم
*برای تبدیل keyCode های لیست به number از stackoverflow کمک گرفتم
<script>
var PersianChars = {
72: "ا",
70: "ب",
220: "پ",
74: "ت",
69: "ث",
219: "ج",
221: "چ",
80: "ح",
79: "خ",
78: "د",
66: "ذ",
86: "ر",
67: "ز",
83: "س",
65: "ش",
87: "ص",
81: "ض",
88: "ط",
90: "ظ",
85: "ع",
89: "غ",
82: "ق",
84: "ف",
186: "ک",
222: "گ",
71: "ل",
76: "م",
75: "ن",
188: "و",
73: "ه",
68: "ی",
77: "ئ",
}
var PersianKeys = Object.keys(PersianChars).map((i) => Number(i));
// تبدیل کلید ها به یک لیست عددی جدید
function KeyDown(event){
if (PersianKeys.includes(event.keyCode)) {
event.preventDefault();
event.target.value += PersianChars[event.keyCode]
console.log(event)
}
سلام به همه دوستان فعال در این تاپیک
چه تاپیک خوبی شده
به به
ادامه بدید :) سعی کنید کد را تمیزتر کامل تر و بهینه تر کنید
سلام
در زیر کدی که بنده برای تمرین این جلسه نوشتم را قرار میدهم. امیدوارم مفید باشد.
<!DOCTYPE html>
<html>
<head>
<title>Events Exercise</title>
</head>
<body style="text-align: center;
font-size: xx-large;
margin-top: 5%;">
<input type="text" onkeydown="kyeDown(event)" style="font-size: 25px;">
<script>
var IR_char = {
220: 'پ',
221: 'چ',
219: 'ج',
80: 'ح',
79: 'خ',
73: 'ه',
85: 'ع',
89: 'غ',
84: 'ف',
82: 'ق',
69: 'ث',
87: 'ص',
81: 'ض',
222: "گ",
186: 'ک',
76: 'م',
75: 'ن',
74: 'ت',
72: 'ا',
71: 'ل',
70: 'ب',
68: 'ی',
83: 'س',
65: 'ش',
188: 'و',
77: 'ئ',
78: 'د',
66: 'ذ',
86: 'ر',
67: 'ز',
88: 'ط',
90: 'ظ',
}
function kyeDown(event) {
if (IR_char[event.keyCode] != undefined) {
event.preventDefault();
event.target.value += IR_char[event.keyCode];
} else {}
}
</script>
</body>
</html>
