Форум

Demath · #1 (**permalink**) 27.07.2012, 23:31

Подскажите, пожалуйста, как вызвать функцию (исправление раскладки Ru->En) в заданной области <textarea>?
Граница области задаётся окаймляющей парой: [math],[/math]. То есть нужно, чтобы функция вызывалась только, когда курсор находится между [math] и [/math].

С исправлением раскладки во всей <textarea> почти нет проблем (не пашет в IE)

<!DOCTYPE html>
<html>
<head>
<meta http-equiv=content-type content="text/html; charset=utf-8">

<script type=text/javascript>
String.prototype.reverseRuEnLayout = (function()
{
    var L = {'А':'F','а':'f','Б':'<','б':'\,','В':'D','в':'d','Г':'U','г':'u',
             'Д':'L','д':'l','Е':'T','е':'t','Ё':'~','ё':'`','Ж':';','ж':';',
             'З':'P','з':'p','И':'B','и':'b','Й':'Q','й':'q','К':'R','к':'r',
             'Л':'K','л':'k','М':'V','м':'v','Н':'Y','н':'y','О':'J','о':'j',
             'П':'G','п':'g','Р':'H','р':'h','С':'C','с':'c','Т':'N','т':'n',
             'У':'E','у':'e','Ф':'A','ф':'a','Х':'{','х':'[','Ц':'W','ц':'w',
             'Ч':'X','ч':'x','Ш':'I','ш':'i','Щ':'O','щ':'o','Ъ':'}','ъ':']',
             'Ы':'S','ы':'s','Ь':'M','ь':'m','Э':'\'','э':'\'','Ю':'>','ю':'\.',
             'Я':'Z','я':'z','/':'|',':':'^','?':'&'  //некоторые символы специально не учтены
            },
        r = '', k;
    for (k in L) r += k;
    r = new RegExp('[' + r + ']', 'g');
    k = function(a){return a in L ? L[a] : '';};

    return function() {return this.replace(r, k);
    onpropertychange="document.getElementById('abcd').value = this.value.reverseRuEnLayout()"     
    };
})();
</script>

</head>
<body>
<textarea style="margin-left: 50px; width: 400px; height: 100px;" id="abcd"
          oninput="document.getElementById('abcd').value = this.value.reverseRuEnLayout()">
</textarea>
</body>
</html>

Нашел на этом форуме, как получить курсор в textarea, но использовать это не получается.

Deff · #2 (**permalink**) 27.07.2012, 23:52

Demath,
Воть тут функция для textarea => функция выделения текста в textarea, не работает в IE пост 2

Demath · #3 (**permalink**) 28.07.2012, 19:26

Deff, спасибо. Пока не догнал, как использовать.

Также у немцев нашёл кроссбраузерный скрипт по отловли курсора в textarea вставки ббкодов, но тоже не разберусь, как подогнать для своего

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Einf&uuml;gen von Inhalten in eine Textarea</title>
<script type="text/javascript">
function insert(aTag, eTag) {
  var input = document.forms['formular'].elements['eingabe'];
  input.focus();
  /* für Internet Explorer */
  if(typeof document.selection != 'undefined') {
    /* Einfügen des Formatierungscodes */
    var range = document.selection.createRange();
    var insText = range.text;
    range.text = aTag + insText + eTag;
    /* Anpassen der Cursorposition */
    range = document.selection.createRange();
    if (insText.length == 0) {
      range.move('character', -eTag.length);
    } else {
      range.moveStart('character', aTag.length + insText.length + eTag.length);      
    }
    range.select();
  }
  /* für neuere auf Gecko basierende Browser */
  else if(typeof input.selectionStart != 'undefined')
  {
    /* Einfügen des Formatierungscodes */
    var start = input.selectionStart;
    var end = input.selectionEnd;
    var insText = input.value.substring(start, end);
    input.value = input.value.substr(0, start) + aTag + insText + eTag + input.value.substr(end);
    /* Anpassen der Cursorposition */
    var pos;
    if (insText.length == 0) {
      pos = start + aTag.length;
    } else {
      pos = start + aTag.length + insText.length + eTag.length;
    }
    input.selectionStart = pos;
    input.selectionEnd = pos;
  }
  /* für die übrigen Browser */
  else
  {
    /* Abfrage der Einfügeposition */
    var pos;
    var re = new RegExp('^[0-9]{0,3}$');
    while(!re.test(pos)) {
      pos = prompt("Einfügen an Position (0.." + input.value.length + "):", "0");
    }
    if(pos > input.value.length) {
      pos = input.value.length;
    }
    /* Einfügen des Formatierungscodes */
    var insText = prompt("Bitte geben Sie den zu formatierenden Text ein:");
    input.value = input.value.substr(0, pos) + aTag + insText + eTag + input.value.substr(pos);
  }
}
</script>
</head>
<body>
<form name="formular" action="">
<input type="button" value="Einfügen" onClick="insert('[link]', '[/link]')">
<textarea name="eingabe" cols="30" rows="5">Ihre Nachricht</textarea>
</form>
<p>Positionieren Sie einfach den Cursor innerhalb der textarea oder markieren Sie Text darin. W&auml;hlen Sie dann "Einf&uuml;gen", um <code>[link]...[/link]</code> an dieser Stelle  einf&uuml;gen zu lassen, sofern es der Browser erm&ouml;glicht.</p>
</body>
</html>

Deff · #4 (**permalink**) 28.07.2012, 21:07

Demath,
Читайте пояснения в топике 0 там и спрашивайте 0 просто ставите функцию - прописываете в скрипте свой теxtarea, по вызову функции bbcode(bbopen, bbclose) (из onclick какой нидь кнопки) обрамляется текущий выделенный текст в bbopen, bbclose
bbopen - тег начального обрамления ( к примеру [Demath] )
bbclose - тег конечного обрамления ( к примеру [/Demath] )
парся value теxtarea - (к примеру indexOf) получаете начальное по концу первого тега , а по началу второго - конечные точки выделения
Или если нужно вставить ток в текущее положение используем функцию
function smile(code, popup) в таком виде smile(code) - она вставит только тег в текущее положение курсора - далее парсим - определяем номер символа по концу тега - удаляем вставку

Demath · #5 (**permalink**) 28.07.2012, 23:20

Сообщение от Deff

Читайте пояснения в топике 0 там и спрашивайте 0 просто ставите функцию - прописываете в скрипте свой теxtarea, по вызову функции bbcode(bbopen, bbclose) (из onclick какой нидь кнопки) обрамляется текущий выделенный текст в bbopen, bbclose
bbopen - тег начального обрамления ( к примеру [Demath] )
bbclose - тег конечного обрамления ( к примеру [/Demath] )

Весь скрипт для вставки ббкодов не нужен. Пытаюсь выдрать из него часть, которая определяет положение курсора в textarea.
А, вообще, спасибо, пригодится!

Сообщение от Deff

парся value теxtarea - (к примеру indexOf) получаете начальное по концу первого тега , а по началу второго - конечные точки выделения
Или если нужно вставить ток в текущее положение используем функцию
function smile(code, popup) в таком виде smile(code) - она вставит только тег в текущее положение курсора - далее парсим - определяем номер символа по концу тега - удаляем вставку

Простите, не совсем понял. Если возможно, то подробней, пожалуйста.

__________________________________________________ _____________
P.S. Нашел кроссбраузерную (?) функцию для автокоррекции раскладки клавиатуры.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="ru-ru" xml:lang="ru-ru">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Перевод в транслит</title>
<script type="text/javascript">
function correctRuEnlayout(){
var text=document.getElementById('abcd').value;
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[':']='^';     transl['?']='&';
	//некоторые символы не учтены специально
	
    var result='';
    for(i=0;i<text.length;i++) {
        if(transl[text[i]]!=undefined) { result+=transl[text[i]]; }
        else { result+=text[i]; }
    }
    document.getElementById('abcd').value=result;
}
</script>
</head>
<body style="padding-left: 100px;">
<textarea id="abcd" style="width:300px; height:100px;" onkeyup="correctRuEnlayout()" ></textarea>
</body>
</html>

Deff · #6 (**permalink**) 28.07.2012, 23:26

Сообщение от Demath

Простите, не совсем понял. Если возможно, то подробней, пожалуйста.

Выделили текст курсором, по клику на кнопку(как тут в форме отправки сообщений) обрамили его уникальными тегами( поскольку обрамили по клику - тут жа считываем value у textarea и парсим своё уникальное обрамление, определем позицию - регуляркой или чисто replace - удаляем временно вставленные теги - что - не понятно ?

Deff · #7 (**permalink**) 28.07.2012, 23:49

Сообщение от Demath

P.S. Нашел кроссбраузерную (?) функцию для автокоррекции раскладки клавиатуры.

http://hostjs-mybb2011.narod.ru/Rus_Lat.htm Вторая кнопка (*Т) - Выделяем текст и жмем(Второй раз выделяем и жмём

Demath · #8 (**permalink**) 29.07.2012, 11:55

Спасибо, хороший и нужный скрипт, пригодится, но не совсем подходит под текущую нужду.

Например, чтобы пользователю набрать этот абзац с формулам (см. рис.), нужно 24 раза переключить раскладку клавиатуры, так как LaTex-код формул набирается на латинице.

Нужно чтобы функция вызывалась (автокоррекция раскладки клавиатуры во время ввода) только когда русская буква появляется между [math]здесь[/math], а не во всей textarea. Думаю, не обязательно отлавливать позицию курсора.

Сама функция

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="ru-ru" xml:lang="ru-ru">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Перевод в транслит</title>
<script type="text/javascript">
function correctRuEnlayout(){
var text=document.getElementById('abcd').value;
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[':']='^';     transl['?']='&';
	//некоторые символы не учтены специально
	
    var result='';
    for(i=0;i<text.length;i++) {
        if(transl[text[i]]!=undefined) { result+=transl[text[i]]; }
        else { result+=text[i]; }
    }
    document.getElementById('abcd').value=result;
}
</script>
</head>
<body style="padding-left: 100px;">
<textarea id="abcd" style="width:300px; height:100px;" onkeyup="correctRuEnlayout()" ></textarea>
</body>
</html>

Demath · #9 (**permalink**) 30.07.2012, 19:51

Получилось только с помощью регулярных выражений

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="ru-ru" xml:lang="ru-ru">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Перевод в транслит</title>
<script type="text/javascript">
function correctLayout(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';
    //некоторые символы не учтены специально
    
    var result='';
    for(i=0;i<text.length;i++) {
        if(transl[text[i]]!=undefined) { result+=transl[text[i]]; }
        else { result+=text[i]; }
    }
    return result;
};

function correctInPsevdoTag(text){
  re= /\[math\]((.(?!\[\/math\]))*.)\[\/math\]/ig;
    translit= function(text, group1) {
        return correctLayout('[math]'+group1+'[/math]');
    };
    return text.replace(re, translit);
}
</script>
</head>
<body style="padding-left: 100px;">
<textarea id="abcd" style="width:300px; height:100px;" onkeyup="this.value=correctInPsevdoTag(this.value);"></textarea>
</body>
</html>

Но после каждого нажатия клавиши внутри [math][/math] курсор перебрасывает в конец строки

Как это можно исправить?

Deff · #10 (**permalink**) 30.07.2012, 20:05

Сообщение от Demath

Но после каждого нажатия клавиши внутри курсор перебрасывает в конец строки

Нун нажимать не клавишами - а иконкой в вашей форме - выделили текст - нажали - иконку

Форум

Справочник

Discord чат

Курсы javascript