При нажатий на определенные буквы на клавиатуре должно выходит внизу у Edit др символ
:help: Добро утро! Можете помочь с проектом. У меня при нажатий на определенные буквы на клавиатуре должно выходит внизу у Edit другой заминающей символ. Я сделал в отдельном странице как смог но он сыроват.
http://demo.artweb.kz/qazaq/autopas/index.html - здесь надо выбирать символ стрелкой Вниз+Enter. Если смотреть на мой код то там просто позиций указаны относительно x/y и это не правильно работает при выставление на страницу проекта. *-*-*-*--* У меня при нажатий на определенные буквы на клавиатуре должно выходит внизу у Edit и только под этой буквой другой заминающей символ и также потом для выбора Вниз+Enter нажат и он вставился в это место в Edit |
copkrg@gmail.com, все твои "портянки" типа этой
Цитата:
var obj {
'A': 'Á',
'a': 'á',
'G': 'Ǵ',
'g': 'ǵ',
};
if (obj[int_chr]){
m_modul.innerHTML=obj[int_chr];
v_kz=obj[int_chr];
m_modul.style.display='block';
}
|
Спасибо конечно, но немного не то. Мне необходимо чтобы при наборе в Input именно под определенной буквой выходило блок, где можно выбрать другую букву. Например слово "Ozin" мне надо набрать как Óziń. Но на клавиатуре нет таких символов при вводе на латинице. И задача такая чтобы при вводе буквы "O" и буквы "n" должен быть выбор, выбрать букву "Ó" и "ń" строго под той буквы которую я ввожу. Так есть именно под курсоров ввода.
|
Цитата:
У тебя есть и другие портянки. :( |
замена символов по Вниз+Enter
copkrg@gmail.com,
поставить курсор перед нужным символом или выделить текст.
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8" />
<style type="text/css">
.main_module.show {
display: block;
}
.main_block{
margin: 0 auto;
background-color: #f2f2f2;
border-radius: 20px;
border: 1px solid #8aec82;
width: 700px;
height: 300px;
margin-top: 100px;
box-sizing: border-box;
padding: 20px;
box-shadow: 0 0 10px #8aec82;
}
H1{
font-size: 24px;
font-family: sans-serif;
}
.work_area{
background-color: #8aec82;
border-radius: 20px;
height: auto;
width: 100%;
}
.int_test{
margin: 10px;
font-size: 18px;
border-radius: 20px;
padding-left: 20px;
border: 1px solid #bfbfbf;
padding: 3px;
width: 95%;
box-sizing: border-box;
}
.int_test:focus{
outline:none;
}
/*simbol module*/
.main_module{
width: 270px;
height: 60px;
position: absolute;
top: 250px;
left: 460px;
background-color: #eeeeee;
border: 1px solid #8a8a8a;
border-radius: 5px;
display: none;
text-align: center;
}
#div_char_up{
width: 100%;
height: 50%;
float: left;
border-radius: 5px 5px 0px 0px;
}
#div_char_down{
width: 100%;
height: 50%;
border-radius: 0px 0px 5px 5px;
float: left;
}
.sellect{
background-color: yellow;
}
.p_char{
font-size: 24px;
margin: 0px;
text-align: center;
}
</style>
<script src="https://unpkg.com/grapheme-splitter@1.0.4/index.js"></script>
</head>
<body>
<div class="main_block">
<h1>Проверка работоспособности вставки казахского шрифта</h1>
<div class="work_area">
<input
id="int_test"
class="int_test"
type="text"
name=""
value=""
placeholder="Введите текст"
/>
</div>
<p style="font-family:sans-serif; width:100%;text-align:center;margin-top:60px;">
Демонстрация вставки дополнительных символов
</p>
</div>
<div id="main_module" class="main_module">
<div id="div_char_down">
нажмите одновременно Вниз+Enter для замены символа/ов перед курсором на
<span id="chr_kz" class="p_char">b</span>
</div>
</div>
<script>
const obj = {
A: 'Á',
a: 'á',
G: 'Ǵ',
g: 'ǵ',
O: 'Ó',
n: 'ń'
};
let keys = {},
pos,
newStr;
let splitter = new GraphemeSplitter();
function getChr(event) {
pos = {start : this.selectionStart, end : this.selectionEnd};
if (pos.start === void 0) return;
if (pos.start === pos.end) pos.start--;
let val = this.value;
let str = val.slice(pos.start, pos.end);
newStr = splitter.splitGraphemes(str).map(function(g) {
return g in obj ? obj[g] : g
}).join('');
if (newStr != str) {
chr_kz.innerHTML = newStr;
main_module.classList.add('show');
pos.end = pos.start + newStr.length;
newStr = val.substring(0, pos.start) + newStr + val.substring(pos.end);
} else main_module.classList.remove('show');
}
int_test.addEventListener('keydown', function(event) {
const key = event.key;
if (key === 'ArrowDown' || key === 'Enter') keys[key] = true;
if (keys.ArrowDown === true && keys.Enter === true && main_module.classList.contains('show')) {
event.preventDefault();
int_test.value = newStr;
main_module.classList.remove('show');
int_test.focus();
int_test.setSelectionRange(pos.end, pos.end);
}
});
document.addEventListener('keyup', function(event) {
const key = event.key;
if (key === 'ArrowDown' || key === 'Enter') keys[key] = false;
});
int_test.addEventListener('input', getChr);
int_test.addEventListener('mouseup', getChr);
</script>
</body>
</html>
|
| Часовой пояс GMT +3, время: 21:54. |