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>