Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: Общие вопросы > Не редактируемая область в textarea


Автор: Ghirik 5.2.2008, 14:48
Есть задача создать не редактируемую область в textarea. Обьясню... textarea находится в форме, нужно, чтобы изначально, при открытии формы, в textarea создавалась область в которой будет расположен какой-то текст. И этот текст нельзя было изменять пользователю, но чтобы програмно я его мог менять. При том, в процессе ввода текста пользователем, размер и содержимое этой области будет програмно изменяться.

Возможно такое сделать? Как? Покажите направление... а то, у меня ни каких мыслей.... smile 

Автор: KuZyagroup 19.2.2008, 11:46
Если правильно протелепатил сообщение то
Код

<head>
<script type="text/javascript" language="javascript">
<!-- 
function myChange1(){
    document.getElementById('myTextarea').innerHTML = "New text";
}
function myChange2(){
    document.getElementById('myTextarea').setAttribute("rows","10");
    document.getElementById('myTextarea').innerHTML += " and new size";
}

-->
</script>
</head>
<body>
    <form action="#" method="get">
     <textarea id="myTextarea"  disabled="disabled">My first text</textarea>
    </form>
    <a onclick="myChange1();">click to first change</a><br />
    <a onclick="myChange2();">click to second change</a>
</body>

Автор: bars80080 19.2.2008, 11:57
чисто идея,

может всю эту программную область запихнуть в плавающий слой и зафиксировать над углом текстареа, так чтобы сливался, а в самом поле как-то выделить эту область, чтоб поле в это месте было уже

Автор: KuZyagroup 19.2.2008, 12:39
Код

<head>
<script type="text/javascript" language="javascript">
<!-- 
function myChange1(){
    document.getElementById('myTextarea').innerHTML = "\nNew text";
}
function myChange2(){
    document.getElementById('myTextarea').setAttribute("rows","10");
    document.getElementById('myTextarea').innerHTML += " and new size";
}
function myShow(){
    alert(document.getElementById('myTextarea').innerHTML);
}
function doSizes(){
    /// тут подгон размера div под размер textarea
}
-->
</script>
</head>
<body onload="doSizes();">
    <div style="position:absolute">
    <form action="#" method="get">
      <textarea name="myTextarea" id="myTextarea" >
My first text</textarea>
    </form>
    <nobr><a onclick="myShow();">Show innerHTML of textArea</a> <br /></nobr>
    <a onclick="myChange1();">click to first change</a><br />
    <a onclick="myChange2();">click to second change</a></div>
    <div style="margin-left:0.1em; position:absolute;">noneditable text</div>
</body>


Вот визуализация начального положения.
Уже есть общая концепция реализации.
1. Просвятить меня как в textarea enter сделать (тут что-то я затупил  smile )
2. Написать перехватчик поподания курсора в текстареа под див

Автор: Sardar 19.2.2008, 14:22
Проще вынести не редактируемую часть текста вне textarea, поверх в слое с красивым форматированием.
В крайнем случае можно убрать border'ы у textarea, примкнуть слой с текстом, обрисовать border вокруг всей композиции. Конечно при скроллинге будет видно, что фиксированный текст вне textarea.

На встречу: где это понадобилось?

Автор: Ghirik 19.2.2008, 14:43
Спасибо за предложения, но это несколько не то. Каюсь, хреново изложил задачу.

Суть такова. Я плохо ориентируюсь в php (ни как smile ). Есть движок форума SMF, в нем редактор сообщений, в нем textarea. Я пытаюсь встроить онлайн перевод сообщений на английский язык. И как идеальный вариант, считаю перевод по одному предложению. Т.е., чел закончил ввод предложения поставил точку, и предложение сразу перевелось и появилось в textarea над его сообщением. Результирующим текстом должен быть текст в textarea на двух языках, вначале на английском, потом на русском. При вводе, можно складывать предложения в массив на случай редактирования в середине текста (для повторного перевода).

Конечно, эту задачу лучше решать средствами php, но там нужно довольно многое поменять. Во первых, лучше использовать две области ввода, две textarea. И в зависимости от того, в которую человек вводит текст, осуществлять направление перевода. Во вторых, серверный скрипт должен принять данные не из одной textarea, а из двух. И положить эти данные в базу так, чтобы потом можно было изымать их обратно для редактирования какждые в свою textarea. С этим мне не справиться. Если только кто поможет smile . 

В общем, я пока в замешательстве, и полнейшей нерешимости smile .

Автор: Sardar 19.2.2008, 15:03
Перевод не бывает построчным (частое заблуждение), говорю как человек владеющий 3 языками.

В твоём случае достаточно div'а, внутри span'ы со строчками. При клике на span можно временно заменять его input:text'ом (в крайнем случае .designMode="on", но тогда структура может быть нарушена.). Задача муторная и приложеных усилий не стоит, будет не удобно.

Автор: Ghirik 19.2.2008, 15:09
Цитата

Перевод не бывает построчным (частое заблуждение), говорю как человек владеющий 3 языками.


Что значит по строчным? Я не имею ввиду строки, я говорю о законченных предложениях. Предложения ведь переводятся по отдельности?

Автор: Sardar 19.2.2008, 17:37
Цитата(Ghirik @  19.2.2008,  14:09 Найти цитируемый пост)
Предложения ведь переводятся по отдельности?

Под строкой я имел в виду "предложение" (с большой буквы и до точки). Нет, предложения не переводятся по отдельности, если мы говорим о качественном (для людей) переводе. Построчно работает только машинный перевод, читать такое - пытка.

Автор: Itsys 20.2.2008, 12:16
Мне кажется надо копать в сторону обработки события onkeydown и проверки текущей позиции курсора и вслучае нажатия кнопки в запрещенной возвращать false....

Автор: ksnk 20.2.2008, 12:20
Цитата(Sardar @  19.2.2008,  17:37 Найти цитируемый пост)
Построчно работает только машинный перевод, читать такое - пытка. 
 Ооо! Классное предложение, Ghirik, по мысли Sardar'а, вам следует нанять профессионального переводчика и юзать его в режиме online-24 часа smile 

Автор: Ghirik 20.2.2008, 17:42
Цитата

Мне кажется надо копать в сторону обработки события onkeydown и проверки текущей позиции курсора и вслучае нажатия кнопки в запрещенной возвращать false.... 


Да, действительно, самое реальное решение. onkeydown по любому обрабатывать, ну и делать в самом начале проверочку позиции курсора. Мне где то даже ссылку давали на кроссбраузерный вычислитель позиции. Там даже разные шрифты/размеры можно было применять.

Я сейчас загрузил мод WYSIWYG-редактора  для SMF, буду прикручивать к своим шаблонам, ещё не видел, похоже он не на textarea... Потом буду определяться, что делать.

Автор: Itsys 20.2.2008, 18:08
Для опеределения позиции курсора можно сделать так:
Код

    cursor = document.selection.createRange().duplicate();
    cursor.moveStart("textedit", -1);
    var textbefore = cursor.text;

Автор: Nigel 20.2.2008, 18:40
А можно просто сменить фокус на другой элемент управления...

Автор: Ghirik 20.2.2008, 19:24
Itsys, а в котором месте получим позицию? В textbefore ведь вернется просто строка.

Цитата

А можно просто сменить фокус на другой элемент управления... 


А это как? Ну сменим фокус, ну вернем назад... И что?

Автор: Itsys 20.2.2008, 22:10
Ну как как textbefore.length - длина строки от начала

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)