Настройка транскрипта в форме, при нажатии на чекбокс, не отключается.

[Dmitrij_Kh]

Здравсвуйте, есть вопрос. Нужно сделать транкрипцию в поле формы, автоматом меняются буквы с кирилицы на латиницу. При нажатии на чекбокс (отключить транскрипцию), отключаем, и обратно. Транслитерация работает, не разберусь как прописать чекбокс. Такой код:

<label for="trChek" id ="translit_no">Отменить транслитерацию</label>
<input id="trChek" type="checkbox" onchange="checkboxTr()">
<input type="text" id="translit">
let input = document.getElementById('translit');

//Функция производящая транскрипцию, вызываем позже через чекбокс.
// input.addEventListener('input', function() {
// this.value = textTransform(this.value);
// });

const trim = string => {
//Удаляем пробел вначале строки и ненужные символы
string = string.replace(/(^\s+)|'|"|<|>|\!|\||@|#|$|%|^|\^|\$|\\|\/|&|\*|\(\)|\|\/|;|\+|№|,|\?|:|{|}|\[|\]/g, "");
return string;
};

const textTransform = text => {
let arrru = [ 'Я','я','Ю','ю','Ч','ч','Ш','ш','Щ','щ', 'Ж','ж','А','а','Б','б','В','в','Г','г', 'Д','д','Е','е','Ё','ё','З','з','И','и', 'Й','й','К','к','Л','л','М','м','Н','н', 'О','о','П','п','Р','р','С','с','Т','т', 'У','у','Ф','ф','Х','х','Ц','ц','Ы','ы', 'Ь','ь','Ъ','ъ','Э','э', ' ' ];
let arren = [ 'Ya','ya','Yu','yu','Ch','ch','Sh','sh','Sh','sh', 'Zh','zh','A','a','B','b','V','v','G','g','D','d', 'E','e','YO','yo','Z','z','I','i','J','j','K','k', 'L','l','M','m','N','n', 'O','o','P','p','R','r','S','s','T','t','U','u','F ','f','H','h','C','c','Y','y','','','','','E', 'e', '' ];

for(let i=0; i<arrru.length; i++){
let reg = new RegExp(arrru[i], "g");
text = text.replace(reg, arren[i]);
}
return text = trim(text).toUpperCase();
};

// Проверка чекбокса на нажатие
let checkbox;
checkbox = document.getElementById('trChek');

function checkboxTr() {
if (!checkbox.checked) {
input.addEventListener('input', function() {
this.value = textTransform(this.value);
});
console.log('транслит включен');
} else {

console.log('Транслит отменен');
}
};

[рони]

Dmitrij_Kh,

// Проверка чекбокса на нажатие
let checkbox;
checkbox = document.getElementById('trChek');
input.addEventListener('input', function() {
checkbox.checked || (this.value = textTransform(this.value));
});

Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

[Malleys]

Dmitrij_Kh, вы не сможете в данном случае транслитерированный текст восстановить обратно, поскольку у вас: 1) происходит удаление символов, 2) некоторые транслитерированные символы имеют одинаковое значение. Вам лучше смотреть на эту проблему так — есть текст-источник, и есть преобразованный текст.

<form onsubmit="return false;" oninput="_translate(this);">
	<input type="text" name="text" />
	<label>
		<input name="transliterate" type="checkbox" checked />
		Транслитерация
	</label>
	<output name="transliterated-text"></output>
</form>
<script>
	const purgeText = string => string.replace(/(^\s+)|'|"|<|>|\!|\||@|#|$|%|^|\^|\$|\\|\/|&|\*|\(\)|\|\/|;|\+|№|,|\?|:|{|}|\[|\]/g, "");

	const textTransform = originalText => {
		let arrCyr = "Я,я,Ю,ю,Ч,ч,Ш,ш,Щ,щ,Ж,ж,А,а,Б,б,В,в,Г,г,Д,д,Е,е,Ё,ё,З,з,И,и,Й,й,К,к,Л,л,М,м,Н,н,О,о,П,п,Р,р,С,с,Т,т,У,у,Ф,ф,Х,х,Ц,ц,Ы,ы,Ь,ь,Ъ,ъ,Э,э, ".split(",");
		let arrLat = "Ya,ya,Yu,yu,Ch,ch,Sh,sh,Sh,sh,Zh,zh,A,a,B,b,V,v,G,g,D,d,E,e,YO,yo,Z,z,I,i,J,j,K,k,L,l,M,m,N,n,O,o,P,p,R,r,S,s,T,t,U,u,F ,f,H,h,C,c,Y,y,,,,,E,e,".split(",");
		let text = originalText;

		for (let i = 0; i < arrCyr.length; i++)
			text = text.replace(new RegExp(arrCyr[i], "g"), arrLat[i]);

		return purgeText(text).toUpperCase();
	};
	function _translate(form) {
		const text = form.elements.text.value;
		const sholdBeTransliterated = form.elements.transliterate.checked;
		const output = form.elements["transliterated-text"];

		output.value = sholdBeTransliterated ? textTransform(text) : text;
	}
</script>
<style>
	form {
		display: grid;
		max-width: 30em;
	}
	form output {
		border-top: thin dashed #789;
		padding-top: 1em;
		margin-top: 1em;
	}
</style>

[Dmitrij_Kh]

Спасибо, как раз то что нужно. Учту замечания, только зарегился на сайте, мало опыта. В дальнейшем буду исправляться).

[Dmitrij_Kh]

Спасибо, как раз то что нужно. Учту замечания и впредь буду внимательнее.