| |
|
|
| | Доброго времени суток, форумчане.
Есть задача на редактирование текста.
Представим таблицу из двух колонок и нескольких строк.
Левая колонка - краткое описание правой.
Например, если в левой написано "О пользователе", то в правой будет написан текст о пользователе.
Нужно при двойном щелчке на текст правой колонки войти в режим редактирования, т.е. ввода текста не перезагружая страницу.
Как это осуществить лучше всего?
Думал сделать текстовое поле справа отключенное (атрибут disabled), но не знаю как его в включить для редактирования после события onDblClick.
Или лучше сделать как-нибудь по другому?
Как? | |
| |
|
|
| |
|
|
| |
для: qwofer
(28.01.2012 в 19:36)
| | |
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<script>
function fShow (x, y)
{
if (y && x.lang == 0) {x.readOnly = 0; x.lang = 1; x.style.backgroundColor = ''} //ВКЛ.
else {x.readOnly = 1; x.lang = 0; x.style.backgroundColor = 'silver'} //ВЫКЛ.
}
</script>
</head>
<body>
<table cellpadding="0" cellspacing="0" border>
<tr>
<td style="padding: 20px">Description</td>
<td><textarea lang="0" readonly style="background-color: silver; width: 300px; height: 200px" ondblclick="fShow (this, 1)" onblur="fShow (this, 0)">bla-bla</textarea></td>
</tr>
</table>
</body>
</html>
|
* Двойной клик делает поле активным, повторный двойной клик или потеря фокуса - пассивным.
** Для того, чтобы во всех браузерах было видно - какое именно поле в данный момент активно, я дал пассивному серый фон style="background-color: silver", который при "активности" меняется на фон по умолчанию.
*** Таковых полей (<TEXTAREA> и <INPUT>) во втором столбце (и вообще на странице) может быть сколько угодно при одной единственной функции в скриптовом блоке. Не забывайте каждому прописывать readonly, lang="0" и ondblclick="fShow (this, 1)" с onblur="fShow (this, 0).
**** Соответственно, чтобы потом значения этих полей отправить на сервер, надо каждому из полей дать атрибут NAME с каким-то значением и перед (и после) таблицы прописать теги <FORM> (и </FORM>). | |
| |
|
|
| |
|
|
| |
для: АЯС
(28.01.2012 в 20:54)
| | | Ваш ответ помог мне, огромное спасибо, я именно так все и сделал, только добавил стили курсора, убрал рамки в режиме чтения и т.п., спасибо что подсказали! | |
| |
|
|
