Запретить перенос каретки в конец строки в textarea

@Alexdemath · Регистрация: 11.04.2010

Author24 — интернет-сервис помощи студентам

Есть скрипт, который корректирует раскладку клавиатуры (с Ru на En) внутри тегов [math][/math] в textarea во время ввода (событие OnKeyUp).
Пашет верно, только после каждого ввода русской буквы внутри [math][/math] каретка перемещается в конец строки.
Возможно ли запретить перенос каретки в конец строки?

Javascript

<!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" />
<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 correctInTag(text){
  re= /\[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 style="width:300px; height:100px;"
id="abcd" onkeyup="this.value=correctInTag(this.value);">
Наберите что-либо на русском внутри  [math][/math].
 
Пример.
</textarea>
</body>
</html>

@kalabuni · 31.07.2012, 15:36

Alexdemath, здесь можно работать с объектом selection ()

1. создать объект selection ()
2. расширить его на один символ влево от текущего положения каретки
3. проверить текст выделенного на "кирилличность"
4. заменить текст в случае необходимости
5. снять выделение.

Тогда каретка перемещаться не будет.

Если не справитесь, напишите, помогу.

PS. text [i] при обращении к конкретному символу строки по его индексу - некроссбраузерно.
Надо пользовать метод text.charAt (i)

@Alexdemath · 31.07.2012, 16:59 **[ТС]**

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

Alexdemath, здесь можно работать с объектом selection ()
1. создать объект selection ()
2. расширить его на один символ влево от текущего положения каретки
3. проверить текст выделенного на "кирилличность"
4. заменить текст в случае необходимости
5. снять выделение.
Тогда каретка перемещаться не будет.
Если не справитесь, напишите, помогу.

Спасибо. Я даже и не думал в этом направлении.
Но пока не разобрался. Если будет время, помогите доделать.

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

PS. text [i] при обращении к конкретному символу строки по его индексу - некроссбраузерно.
Надо пользовать метод text.charAt (i)

Благодарю. (хотел попроще

)

@newJS · 31.07.2012, 21:39

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

Возможно ли запретить перенос каретки в конец строки?

Запретить не получиться, нужно запомнить позицию курсора перед действием, выполнить само действие, потом вернуть курсор на своё место.

@kalabuni · 01.08.2012, 09:42

В первом приближении:

HTML5

<textarea style="width: 300px; height: 100px"
          id="abcd"
          onkeyup="correctInTag (this)">
Наберите что-либо на русском внутри  [math][/math].
 
Пример.
</textarea>
 
<script> 
function correctInTag (t)
{ 
if ((/[а-я]/i).exec (t.value.split ('[math]') [1].split ('[/math]') [0]) == null) return;
var cyr = 'АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЬЫЪЭЮЯабвгдеёжзийклмнопрстуфхцчшщьыъэюя',
    klv = 'F<DULT~:PBQRKVYJGHCNEA{WXIOMS}">Zf,dult`;pbqrkvyjghcnea[wxioms]\'.z';
if (document.selection)
   {
   t.focus ();
   var rng = document.selection.createRange ();
   rng.moveEnd ('character', -1); rng.moveEnd ('character', 1);
   rng.text = klv.charAt (cyr.indexOf (rng.text));
   }
else if (t.selectionStart >= 0)
   {
   var s = t.selectionStart - 1;
   t.value = t.value.substr (0, s)
           + klv.charAt (cyr.indexOf (t.value.substr (s, 1)))
           + t.value.substr (s + 1);
   t.selectionStart = t.selectionEnd = s + 1;
   }
} 
</script>

Строку #14 проверьте - я сделал точное соответствие клавиатуре, а у вас там вроде были какие-то нюансы с этим.
-----

Работать будет при посимвольном вводе с клавиатуры.

Варианты с "залипанием" клавиши, с вводом методом "Paste" мышкой (или при помощи Ctrl+V) реализовать тоже можно.
Но за отдельные деньги

@Alexdemath · 01.08.2012, 09:58 **[ТС]**

Спасибо большое!

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

Строку #14 проверьте - я сделал точное соответствие клавиатуре, а у вас там вроде были какие-то нюансы с этим.

Разобрался, как добавить ещё символы.

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

Работать будет при посимвольном вводе с клавиатуры. Варианты с "залипанием" клавиши, с вводом методом "Paste" мышкой (или при помощи Ctrl+V) реализовать тоже можно.
Но за отдельные деньги

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

А что ещё добавить, чтобы содержимое всех тегов [math][/math] конвертировалось?

А то сейчас только для первого тега скрипт срабатывает.

@kalabuni · 02.08.2012, 05:05

Строку #12 в моём коде замените на три строки:

Javascript

1
2
3

for (var z = t.value.split ('[math]'), f = 0, j = 1, lj = z.length; j < lj; j++)
   if (new RegExp ('[à-ÿ]', 'i').exec (z [j].split ('[/math]') [0]) != null) {f = 1; break}
if (!f) return;

@Alexdemath · 02.08.2012, 18:48 **[ТС]**

kalabuni, спасибо!
Пользователи Вам очень благодарны.

@Alexdemath · 09.10.2012, 20:13 **[ТС]**

kalabuni, Ваш скрипт верно корректирует, но подтормаживает при высокой скорости набора и иногда каретка "съедает" закрывающий тег.

Нашел, как получить и задать позицию каретки в textarea. Добавил эти функции к первоначальному скрипту. В Opera, Mozilla и Chrome работает, вроде бы, без глюков (во всяком случае, не заметил).

В IE как всегда - если каретка на первой строке, то всё хорошо, если на последующих, то к позиции каретки прибавляется число переносов строк до данной строки после отпускания любой клавиши.
Возможно ли сие побороть?

Javascript

<!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" />
<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 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'; 
    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 correctLayoutInTag(text,cursor)
{
    text = document.getElementById('abcd');
    cursor = getCaret(document.getElementById('abcd'));
    translit = function(text, group1) { return '[math]'+correctLayout(group1)+'[/math]'}
    text.value = text.value.replace(/\[math\]([\s\S]*?)\[\/math\]/ig, translit);
    setCaretToPos(text, cursor);
}
</script>
</head>
<body style="padding-left: 100px;">
<textarea style="width:400px; height:150px;" id="abcd" onkeyup="correctLayoutInTag()">
Наберите что-либо на русском внутри тегов
 
[math][/math].
</textarea>
</body>
</html>

Спасибо за внимание.

@newJS · 09.10.2012, 21:21

попробуй эти функции

Javascript

этот код правильно работает только в textarea
function getCaretPosT(obj){//все
var s, e, p;
if(typeof obj!="object"){obj=document.getElementById(obj);};
obj.focus();
if(document.selection){//ie, opera
s=document.selection.createRange();
if(window.opera){//opera
s.moveStart("character", -obj.value.length);
return s.text.length;}
else{//IE
e=document.body.createTextRange();
e.moveToElementText(obj);
for(p=0; e.compareEndPoints("StartToStart", s)<0; p++){
e.moveStart('character', 1);};
return p;}}
else{if(obj.selectionStart||obj.selectionStart=="0"){
return obj.selectionStart;}};
 };
 
function getCaretPosT(obj){//ещё одна версия
var s, c;
if(typeof obj!="object"){obj=document.getElementById(obj);};
obj.focus();
if(document.selection){//IE
s= document.selection.createRange();
c=s.duplicate();
s.collapse(true);
c.moveToElementText(obj);
c.setEndPoint('EndToEnd', s);
return c.text.length;}
else{if(obj.selectionStart!==false){return obj.selectionStart;}}//Gecko
else{return 0;};
 };
 
function setCaretPos(obj, p){
if(typeof obj!="object"){obj=document.getElementById(obj);};
obj.focus();
if(obj.setSelectionRange){obj.setSelectionRange(p,p);}//FF
else{if(obj.createTextRange){//IE
var r=obj.createTextRange();
r.collapse(true);
r.moveEnd("character", p);
r.moveStart("character", p);
r.select();}};
 };

попробуй по этому принципу массив сделать
Получает имя ключа
Возвращает HEX или null

Javascript

1
2
3

function nameColor(Name){
return {"violetred":"#d02090", "wheat":"#f5deb3", "white":"#ffffff", "whitesmoke":"#f5f5f5", "yellow":"#ffff00", "yellowgreen":"#9acd32"}[Name.toLowerCase()]||null;
 };

@Alexdemath · 09.10.2012, 23:21 **[ТС]**

newJS, спасибо за функции! Проблема решена - теперь и в IE каретка сохраняет позицию!

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,625
	31.07.2012, 15:36	2
	Alexdemath, здесь можно работать с объектом selection () 1. создать объект selection () 2. расширить его на один символ влево от текущего положения каретки 3. проверить текст выделенного на "кирилличность" 4. заменить текст в случае необходимости 5. снять выделение. Тогда каретка перемещаться не будет. Если не справитесь, напишите, помогу. PS. text [i] при обращении к конкретному символу строки по его индексу - некроссбраузерно. Надо пользовать метод text.charAt (i) 1

@Alexdemath 128 / 125 / 39 Регистрация: 11.04.2010 Сообщений: 255
	31.07.2012, 16:59 [ТС]	3
	Сообщение от kalabuni Alexdemath, здесь можно работать с объектом selection () 1. создать объект selection () 2. расширить его на один символ влево от текущего положения каретки 3. проверить текст выделенного на "кирилличность" 4. заменить текст в случае необходимости 5. снять выделение. Тогда каретка перемещаться не будет. Если не справитесь, напишите, помогу. Спасибо. Я даже и не думал в этом направлении. Но пока не разобрался. Если будет время, помогите доделать. Сообщение от kalabuni PS. text [i] при обращении к конкретному символу строки по его индексу - некроссбраузерно. Надо пользовать метод text.charAt (i) Благодарю. (хотел попроще ) 0

@newJS 2435 / 1114 / 312 Регистрация: 23.06.2011 Сообщений: 3,525
	31.07.2012, 21:39	4
	Сообщение от Alexdemath Возможно ли запретить перенос каретки в конец строки? Запретить не получиться, нужно запомнить позицию курсора перед действием, выполнить само действие, потом вернуть курсор на своё место. 1

@Alexdemath 128 / 125 / 39 Регистрация: 11.04.2010 Сообщений: 255
	01.08.2012, 09:58 [ТС]	6
	Спасибо большое! Сообщение от kalabuni Строку #14 проверьте - я сделал точное соответствие клавиатуре, а у вас там вроде были какие-то нюансы с этим. Разобрался, как добавить ещё символы. Сообщение от kalabuni Работать будет при посимвольном вводе с клавиатуры. Варианты с "залипанием" клавиши, с вводом методом "Paste" мышкой (или при помощи Ctrl+V) реализовать тоже можно. Но за отдельные деньги С практической точки зрения, случай копипасты можно смело отбросить. А что ещё добавить, чтобы содержимое всех тегов [math][/math] конвертировалось? А то сейчас только для первого тега скрипт срабатывает. 0

@Alexdemath 128 / 125 / 39 Регистрация: 11.04.2010 Сообщений: 255
	02.08.2012, 18:48 [ТС]	8
	kalabuni, спасибо! Пользователи Вам очень благодарны. 0

@Alexdemath 128 / 125 / 39 Регистрация: 11.04.2010 Сообщений: 255
	09.10.2012, 23:21 [ТС]	11
	newJS, спасибо за функции! Проблема решена - теперь и в IE каретка сохраняет позицию! 0