Имя пользователя:
Пароль:  
Помощь | Регистрация | Забыли пароль?  | Правила  

Компьютерный форум OSzone.net » Компьютеры + Интернет » Вебмастеру » [решено] Помогите склеить две формы для текста.

Ответить
Настройки темы
[решено] Помогите склеить две формы для текста.

Пользователь


Сообщения: 124
Благодарности: 3

Профиль | Отправить PM | Цитировать


Изображения
Тип файла: jpg FORMA.jpg
(45.6 Kb, 12 просмотров)
Здравствуйте. Я придумал для сайта форму отправки сообщений. И тут возникла проблема. Форма будет не прямоугольной, а 6 угольной. Посмотрите пожалуйста на прикрепленный рисунок (поле Messages). Подойдет любое решение. На мой взгляд их два: 1. Создать большую форму, в левом верхнем угле поверх дать рисунок, а под ним не стирающиеся пробелы. Но не знаю как сделать так, чтоб пробелы всегда оставались. 2. Сделать две формы и их "склеить". Java scriptом сделать их работу как одного текстового поля, но тогда будет невозможно выделить весь написанный текст(с остальным думаю что-то сделать можно). Жду ваших советов.
P.S. обидно что современные веб программирование. не позволяет такого осуществить без всяких выдумок(((

Отправлено: 01:09, 10-01-2010

 

Deadooshka


Сообщения: 2499
Благодарности: 682

Профиль | Отправить PM | Цитировать


В HTML5 есть contenteditable, который позволяет менять содержимое тегов. Последними браузерами вроде поддерживается, и прошлыми IE тоже.
HTML код: Выделить весь код
<div id="text" contenteditable="true">введите тут текст</div>

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

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

Отправлено: 02:54, 10-01-2010 | #2



Для отключения данного рекламного блока вам необходимо зарегистрироваться или войти с учетной записью социальной сети.

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


Пользователь


Сообщения: 124
Благодарности: 3

Профиль | Отправить PM | Цитировать


Отлично!! Мне подходит такой вариант. Ну допустим это должно быть в таблице:
Код: Выделить весь код
<td width="250px" height=150px">
<img src="message.png" width="100px" height="30px">
<div id="text" contenteditable="true" style="width:250px; height:150px;">введите тут текст</div>
</td>
, что мне нужно дописать, чтоб блок div обтекал рисунок? БОЛЬШОЕ СПАСИБО!!!

Отправлено: 19:03, 10-01-2010 | #3


Deadooshka


Сообщения: 2499
Благодарности: 682

Профиль | Отправить PM | Цитировать


у меня примерно так получилось
HTML код: Выделить весь код
<div> <img src="message.png" width="100" height="100" style="float:left;" /> <div id="text" contenteditable="true" style="margin:0; padding:0; width:300px; border:1px dotted #ff1493; min-height:200px;"> текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст </div> </div>

без !DOCTYPE не везде работает.

p.s. всегда проверяйте свой HTML-код через валидатор, чтобы не было лишних вопросов...

Последний раз редактировалось Sham, 10-01-2010 в 22:47. Причина: float:left предпочтительнее align="left"

Это сообщение посчитали полезным следующие участники:

Отправлено: 22:03, 10-01-2010 | #4


Deadooshka


Сообщения: 2499
Благодарности: 682

Профиль | Отправить PM | Цитировать


исправил, т.к. style="float:left;" будет предпочтительнее нежелательного атрибута align="left"...

Отправлено: 22:50, 10-01-2010 | #5


Пользователь


Сообщения: 124
Благодарности: 3

Профиль | Отправить PM | Цитировать


Спасибо.
Ну вот, набросал альфу-альфу версию. Посмотрите пожалуйста, что у меня получилось. Вот ссылка.
Чтоб выскочила форма отправки, нужно нажать на WRITE ME! Там только дизайн, сам php скрипт еще не написал, извините за большое разрешение))
Вопросы:
1. Как сделать так, чтоб когда напечатано много текста, то появлялся скролл, а не разъезжался блок?
2. Возможно ли сделать поле ввода 6-угольным, а не прямоугольником?
3. Как поставить переносы строк и т.д.?
P.S. не смотрите чрез оперу, а то там какой-то лаг. Лучше всего через Firefox или Chrome.

Отправлено: 02:22, 11-01-2010 | #6


Deadooshka


Сообщения: 2499
Благодарности: 682

Профиль | Отправить PM | Цитировать


Цитата maasja:
1. Как сделать так, чтоб когда напечатано много текста, то появлялся скролл, а не разъезжался блок? »
вообще то overflow:scroll|auto , но тогда float картинки не работает (пропадает обтекание), так что имхо придется оставить как есть, но кнопку отправки сделать подвижной, чтобы динамически съезжала вниз... мб есть другое решение.
Цитата maasja:
2. Возможно ли сделать поле ввода 6-угольным, а не прямоугольником? »
в html все четырехугольное...
чтобы не было фокус-рамки сделайте outline-width:0
Цитата maasja:
3. Как поставить переносы строк и т.д.? »
не понял.

Отправлено: 00:58, 12-01-2010 | #7


Пользователь


Сообщения: 124
Благодарности: 3

Профиль | Отправить PM | Цитировать


В моем случае outline-width:0 в опере вообше не работает, (можете посмотреть ссылку выше), блок разъезжается как хочет да еще й в разных браузерах по разному, + нельзя совместить overflow:scroll|auto float:left;, кароче ппц((((( мне б идеально подошел textarea с обтеканием, может можно это сделать с помощью какого-нибудь скрипта? HELP, please

Отправлено: 06:20, 12-01-2010 | #8


Deadooshka


Сообщения: 2499
Благодарности: 682

Профиль | Отправить PM | Цитировать


Цитата maasja:
textarea с обтеканием, может можно это сделать с помощью какого-нибудь скрипта? »
имхо даже и не думайте если даже это возможно, то сложно и нецелесообразно...

сделайте нормальную верстку, и кнопку send, чтобы она съезжала с текстом... имхо даже так удобнее, когда весь текст виден. Либо без выпендрежа сделайте обычную прямоугольную форму. Будет негламурненько, но функционально. "...не эстетично, зато дешево, надежно и практично..."(с).
Это сообщение посчитали полезным следующие участники:

Отправлено: 19:15, 12-01-2010 | #9


Пользователь


Сообщения: 124
Благодарности: 3

Профиль | Отправить PM | Цитировать


Цитата Sham:
Либо без выпендрежа сделайте обычную прямоугольную форму. Будет негламурненько, но функционально. "...не эстетично, зато дешево, надежно и практично..."(с). »
- обидно конечно, но так и сделал. Спасибо.

Хотя вышло совсем даже неплохо, можете посмотреть.
P.S. мне так надоели ограниченные возможности в веб-программировании, что буду начинать писать что-то на пк.))

Отправлено: 18:11, 14-01-2010 | #10



Компьютерный форум OSzone.net » Компьютеры + Интернет » Вебмастеру » [решено] Помогите склеить две формы для текста.

Участник сейчас на форуме Участник сейчас на форуме Участник вне форума Участник вне форума Автор темы Автор темы Шапка темы Сообщение прикреплено

Похожие темы
Название темы Автор Информация о форуме Ответов Последнее сообщение
Разное - Помогите мне разобраться с вводом текста. mikemal Microsoft Windows Vista 3 08-08-2009 03:16
C/C++ - [C++Builder 2007] Две формы поверх всех окон и одна форма поверх другой crashtuak Программирование и базы данных 3 13-04-2009 16:33
Wget разбил скачиваемый ISO файл на две части, как теперь склеить? sfap Программное обеспечение Linux и FreeBSD 2 23-11-2007 12:44
Вставка текста из формы Casufi Вебмастеру 2 14-05-2003 11:40




 
Переход