Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Чтобы в разных формах вводился разный язык (https://javascript.ru/forum/dom-window/42101-chtoby-v-raznykh-formakh-vvodilsya-raznyjj-yazyk.html)

Авас 12.10.2013 18:01

Чтобы в разных формах вводился разный язык
 
Как сделать, чтобы, например, если текст вводится в TEXTAREA 1, то он вводится на английском языке, если в TEXTAREA 2 — на русском?
Чтобы человеку, заполняя разные поля, не приходилось переключать язык сочетанием клавиш.

BETEPAH 12.10.2013 18:10

Цитата:

Сообщение от Авас
не приходилось переключать язык

вот здесь похожая задача решалась http://javascript.ru/forum/misc/4208...ter-class.html
Но, правильнее было бы, наверное, ограничиться предупреждением (визуальным, звуковым) что текст вводится не в той раскладке и предоставить выбор человеку.

Авас 20.10.2013 13:17

Как бы... выбора у человека-то и не будет — он в любом случае должен будет вводить текст на английском )) Грубо говоря, в одно поле он вводит название товара по-русски (стол), а в следующее поле — по-английски (table).
Мне понравился вот это Ваш скрипт:
function toggleEncoding(txt) {
	var rus = "абвгдеёжзийклмнопрстуфхцчшщъыьэюя";
	var eng = "f,dult`;pbqrkvyjghcnea[wxio]sm'.z";
	if(txt.search(/[а-яА-Я]/i) > -1) var from = rus, to = eng;
	else var from = eng, to = rus;
	txt = txt.split('');
	for (var i = 0; i < txt.length; i++) {
		console.log(from.indexOf(txt[i]));
		txt[i] = to.charAt(from.indexOf(txt[i])) || txt[i];
	}
	txt = txt.join('');
	alert(txt);
}
toggleEncoding('тест');
toggleEncoding('ntcn');

Но что-то я никак не могу понять, как прикрутить его к textarea. Скажем, человек вводит текст в textarea ('ефиду'), щёлкает мышкой по полю и текст автоматически "переводится" на английский ('table') или наоборот. Т.е. как применить эту функцию к тексту в поле textarea?

BETEPAH 20.10.2013 13:43

<div>русский текст<br />
<textarea onkeyup="this.value = toggleEncoding(this.value, 'ru')"></textarea></div>
<div>английский текст<br />
<textarea onkeyup="this.value = toggleEncoding(this.value, 'en')"></textarea></div>
<script>
function toggleEncoding(txt, lang) {
	lang = lang || 'en';
	var rus = "абвгдеёжзийклмнопрстуфхцчшщъыьэюя";
	var eng = "f,dult`;pbqrkvyjghcnea[wxio]sm'.z";
	if(lang == 'en') var from = rus, to = eng;
	else if(lang == 'ru') var from = eng, to = rus;
	else return txt;
	txt = txt.split('');
	for (var i = 0; i < txt.length; i++) {
		txt[i] = to.charAt(from.indexOf(txt[i])) || txt[i];
	}
	txt = txt.join('');
	return txt;
}
</script>

Авас 20.10.2013 13:57

BETEPAH, а что должно происходить?
В верхнее поле ввожу "стол", в нижнее ввожу "ефиду", но ничего не происходит...

BETEPAH 20.10.2013 14:04

Цитата:

Сообщение от Авас
В верхнее поле ввожу "стол", в нижнее ввожу "ефиду", но ничего не происходит...

именно вводите или вставляете мышкой? :)

Авас 20.10.2013 14:07

Да, именно печатаю.

BETEPAH 20.10.2013 14:11

Авас, у меня все заменяется
какой браузер? ОС?

Авас 20.10.2013 14:25

Всё! Сорри, сорри! Это я стормозил: когда код к себе скопировал, не поудалял лишних символов. Большое спасибо!!

P.S.: хотя, на этом сайте не работает — во втором поле печатает ефиду (вместо 'table'). Мозилла, Xp.

Авас 24.10.2013 17:01

Столкнулся с двумя багами )
1. Если в textarea уже есть текст и нужно дописать что-то в середине, то скрипт заменяет введённую букву и переводит курсор в конец строки.
2. Если хочешь вставить запятую, то он меняет её на "б"; причём, если указать, чтобы он менял "?" на ",", то скрипт всё равно заменит его на "б", т.к. он сначала заменит "?" на ",", а потом "," на "б".

Нашёл решение, где их избежали (правда там только рус -> en, но не суть важно). Но опять столкнулся с проблемой: как переделать из getElementById в getElementsByClassName.
Пробовал сделать по аналогии с тем примером, но не вышло. А как нужно?

Было:
function correctLayoutInTag(text,cursor)
{
    text = document.getElementById('abcd');
    cursor = getCaret(document.getElementById('abcd'));
    translit = function(text) { return correctLayout(text)}
    text.value = text.value.replace(text.value, translit);
    setCaretToPos(text, cursor);
}

<textarea style="width:400px; height:150px;" id="abcd" onkeyup="correctLayoutInTag()">текст</textarea>


Мои танцы с бубном:
function correctLayoutInTag(text,cursor) {

    var text = document.getElementsByClassName('en');
	 for (var i = 0; i < text.length; i++) {
	  var texten = text[i];
	};
	
    var cursor = getCaret(document.getElementsByClassName('en'));
	 for (var i = 0; i < cursor.length; i++) {
	  var cursoren = cursor[i];
	};
	 
    var translit = function(texten) {return correctLayout(texten)}
    texten.value = texten.value.replace(texten.value, translit);
    setCaretToPos(texten, cursoren);

};

<textarea style="width:400px; height:150px;" class="en" onkeyup="correctLayoutInTag()">текст</textarea>
<textarea style="width:400px; height:150px;" class="en" onkeyup="correctLayoutInTag()">текст</textarea>

BETEPAH 24.10.2013 17:59

В восьмой строке функция ожидает принять ссылку на элемент, а вы подсовываете ей массив из ссылок на элементы с классом 'en'
Цикл в 4-6 строках что должен делать по-вашему? У вас получится, что в texten останется ссылка на последний ".en"

Авас 24.10.2013 18:35

var cursor = document.getElementsByClassName('en');
	     for (var i = 0; i < cursor.length; i++) {
		  var cursoren = getCaret(cursor[i]);
	    };

Так?

Цитата:

Сообщение от BETEPAH (Сообщение 278003)
Цикл в 4-6 строках что должен делать по-вашему? У вас получится, что в texten останется ссылка на последний ".en"

Я думал, что эти циклы присвоят переменным texten и cursoren ссылки на элементы...

BETEPAH 24.10.2013 22:42

Цитата:

Сообщение от Авас
Так?

по-любому не так. Попробуйте сами в уме прокрутить этот цикл. Давайте вместе:
1 строка - собираем в массив все ".эн". Допустим их два было.
запускаем дальше цикл. Первый виток цикла - получаем каретку первого поля, сохраняем ее в cursoren. Второй виток цикла - что мы делаем? Правильно, перезаписываем результат первого витка. Получается, что даром мы в предыдущий раз определяли картетку?
Надеюсь, понятно объяснил?

Авас 24.10.2013 22:52

Да... понятно...

Мне кажется, что вот это уже ближе )), но я не знаю, как присвоить переменным text и cursor значения из поля (там, где у меня ???):
var elements = document.getElementsByClassName('en'); {
for (var i = 0; i < elements.length; i++) {

	elements[i] = function correctLayoutInTag(text,cursor) {
	    var text = ???;
        var cursor = getCaret(???); 
	    var translit = function(text) {return correctLayout(text)}
	    text.value = text.value.replace(text.value, translit);
	    setCaretToPos(text, cursor);
	 
	};
	
	};
  };

BETEPAH 25.10.2013 09:11

пятая и шестая строка в этом коде должна находиться выше объявления функции, насколько я понимаю. К тому же зачем ссылки на элементы в массиве перезаписывать функциями? не понятно, чего вы пытаетесь добиться.
По-моему, вы пытаетесь решить надуманную задачу. Почему бы вам не определять, в какой текстарее вызывается скрипт, через this? И не нужно будет тогда этой свистопляски с массивами и прочим

Авас 09.11.2013 19:56

В общем, вот рабочая версия:
<html><head><title>Transliteration</title><meta charset="cp1251" />
<script type="text/javascript">
//Получение позиции каретки в textarea
function getCaret(el)
{   if (el.selectionStart) {return el.selectionStart;} 
    else if (document.selection)
             { el.focus(); 
               var r = document.selection.createRange(); 
               if (r == null) {return 0;} 
               var re = el.createTextRange(), 
                   rc = re.duplicate(); 
               re.moveToBookmark(r.getBookmark()); 
               rc.setEndPoint('EndToStart', re); 
               return rc.text.length; 
             }  
    return 0; 
}
 
//Задание позиции каретки в textarea
function setSelectionRange(input, selectionStart, selectionEnd)
{
    if (input.setSelectionRange)
       { input.focus();
         input.setSelectionRange(selectionStart, selectionEnd);
       }
    else if (input.createTextRange)
            { var range = input.createTextRange();
              range.collapse(true);
              range.moveEnd('character', selectionEnd);
              range.moveStart('character', selectionStart);
              range.select();
            }
}
function setCaretToPos(input, pos) {setSelectionRange(input, pos, pos);}
 
//Транслитерация с русского на английский
function correctLayoutRusToEn(text){
    if (typeof(text)=="undefined") return null;
 var transl=new Array();
    transl['А']='F'; transl['а']='f';  transl['Б']='<';  transl['б']='\,'; transl['В']='D';  transl['в']='d';
    transl['Г']='U'; transl['г']='u'; transl['Д']='L'; transl['д']='l'; transl['Е']='T'; transl['е']='t';
    transl['Ё']='~'; transl['ё']='~'; transl['Ж']=';'; transl['ж']=';'; transl['З']='P'; transl['з']='p';
    transl['И']='B'; transl['и']='b'; transl['Й']='Q'; transl['й']='q'; transl['К']='R'; transl['к']='r';
    transl['Л']='K'; transl['л']='k'; transl['М']='V'; transl['м']='v'; transl['Н']='Y'; transl['н']='y';
    transl['О']='J'; transl['о']='j'; transl['П']='G'; transl['п']='g'; transl['Р']='H'; transl['р']='h';
    transl['С']='C'; transl['с']='c'; transl['Т']='N'; transl['т']='n'; transl['У']='E'; transl['у']='e';
    transl['Ф']='A'; transl['ф']='a'; transl['Х']='{'; transl['х']='['; transl['Ц']='W'; transl['ц']='w';
    transl['Ч']='X'; transl['ч']='x'; transl['Ш']='I'; transl['ш']='i'; transl['Щ']='O'; transl['щ']='o';
    transl['Ъ']='}'; transl['ъ']=']'; transl['Ы']='S'; transl['ы']='s'; transl['Ь']='M'; transl['ь']='m';
    transl['Э']='\"'; transl['э']='\''; transl['Ю']='>'; transl['ю']='\.'; transl['Я']='Z'; transl['я']='z'; 
    transl[':']='^'; transl['/']='|'; transl['?']='&';
    var result='';
    for(i=0; i<text.length; i++)
       { if(transl[text.charAt(i)]!=undefined) {result+=transl[text.charAt(i)]}
         else {result+=text.charAt(i)}}
    return result;
};
 
//Транслитерация с английского на русский
function correctLayoutEnToRus(text){
    if (typeof(text)=="undefined") return null;
 var transl=new Array();
    transl['F']='А'; transl['f']='а';  transl['<']='Б';  transl['\,']='б'; transl['D']='В';  transl['d']='в';
    transl['U']='Г'; transl['u']='г'; transl['L']='Д'; transl['l']='д'; transl['T']='Е'; transl['t']='е';
    transl['~']='Ё'; transl['~']='ё'; transl[';']='Ж'; transl[';']='ж'; transl['P']='З'; transl['p']='з';
    transl['B']='И'; transl['b']='и'; transl['Q']='Й'; transl['q']='й'; transl['R']='К'; transl['r']='к';
    transl['K']='Л'; transl['k']='л'; transl['V']='М'; transl['v']='м'; transl['Y']='Н'; transl['y']='н';
    transl['J']='О'; transl['j']='о'; transl['G']='П'; transl['g']='п'; transl['H']='Р'; transl['h']='р';
    transl['C']='С'; transl['c']='с'; transl['N']='Т'; transl['n']='т'; transl['E']='У'; transl['e']='у';
    transl['A']='Ф'; transl['a']='ф'; transl['{']='Х'; transl['[']='х'; transl['W']='Ц'; transl['w']='ц';
    transl['X']='Ч'; transl['x']='ч'; transl['I']='Ш'; transl['i']='ш'; transl['O']='Щ'; transl['o']='щ';
    transl['}']='Ъ'; transl[']']='ъ'; transl['S']='Ы'; transl['s']='ы'; transl['M']='Ь'; transl['m']='ь';
    transl['\"']='Э'; transl['\'']='э'; transl['>']='Ю'; transl['\.']='ю'; transl['Z']='Я'; transl['z']='я'; 
    transl['^']=':'; transl['/']='|'; transl['&']='?';
    var result='';
    for(i=0; i<text.length; i++)
       { if(transl[text.charAt(i)]!=undefined) {result+=transl[text.charAt(i)]}
         else {result+=text.charAt(i)}}
    return result;
};

window.onload = function() {
var elements = document.getElementsByClassName("en");
	for (var i = 0; i < elements.length; i++) {
		elements[i].onkeyup = function correctLayoutInTag(text,cursor)
		{
		text = this;
		cursor = getCaret(text);
		translit = function (text) { return correctLayoutRusToEn(text)}
		text.value = text.value.replace(text.value, translit);
		setCaretToPos(text, cursor);
		};
	};
var elements = document.getElementsByClassName("rus");
	for (var i = 0; i < elements.length; i++) {
		elements[i].onkeyup = function correctLayoutInTag(text,cursor)
		{
		text = this;
		cursor = getCaret(text);
		translit = function (text) { return correctLayoutEnToRus(text)}
		text.value = text.value.replace(text.value, translit);
		setCaretToPos(text, cursor);
		};
	};
};
</script>
</head>
<body style="padding-left: 100px;">
<textarea style="width:400px; height:150px;" PLACEHOLDER="Транслитерирует с английского на русский" class="rus"></textarea>
<textarea style="width:400px; height:150px;" PLACEHOLDER="Транслитерирует с русского на английкий" class="en"></textarea><br>
<textarea style="width:400px; height:150px;" PLACEHOLDER="Транслитерирует с английского на русский" class="rus"></textarea>
<textarea style="width:400px; height:150px;" PLACEHOLDER="Транслитерирует с русского на английкий" class="en"></textarea>
</body>
</html>

P.S.: на основе скрипта транслитерации осюда: http://www.cyberforum.ru/post3540293.html


Часовой пояс GMT +3, время: 07:32.