Jump to content
  • 0

Текст после таблицы

knyazevsergey

Asked by knyazevsergey,

 Share

Question

knyazevsergey Explorer

knyazevsergey

Posted
Posted
Уважаемые специалисты!

Есть некая задача. На странице выводится простая таблица (!с возможностью редактирования):

screenshot_01.png

Код страницы такой:




<HTML><HEAD>

<META content="text/html; charset=utf-8" http-equiv=Content-Type>

<META name=GENERATOR content="MSHTML 8.00.7601.17514"></HEAD>

<BODY contenteditable="true">

<TABLE style="WIDTH: 100%"  bgColor=#ffffe1>

<TBODY>

<TR borderColor=#ffffe1>

<TD>Text XYZ</TD></TR></TBODY></TABLE>

</BODY></HTML>


 

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

screenshot_02.png

 

Реально ли сделать так, чтобы эту возможность убрать? Т.е. чтобы браузер "думал", что последний символ в документе - "Z", а не пустой символ после таблицы, как на предыдущем скриншоте. Меня это и устроит. Иными словами, чтобы при открытии страницы, при нажатии мышкой в любом месте ниже таблицы курсор становился в таблице (вот так):

screenshot_03.png

Либо существует ли какой-то несложный javascipt, который позволит позиционировать курсор там где мне нужно. (в данном случае сразу после буквы Z) ?

Link to comment
Share on other sites

3 answers to this question

Recommended Posts

  • 0
knyazevsergey Explorer

knyazevsergey

Posted
  • Author
Posted
  On 9/24/2015 at 3:29 PM, Vlad said:

Вы можете использовать contenteditable внутри таблицы, а не для body целиком.

http://jsfiddle.net/n9qsmjhg/

 

Да, я это делал. Но в этом случае как показано на скриншоте 3, работать не будет. Курсор нужно будет точно поставить самому мышкой в указанной таблице, это неудобно.
 
Придется объяснить все-таки цель всего этого. В 1С есть поле HTML документа, куда помещается история общения между сотрудниками. Стоит задача подсвечивать сообщения. Легче всего это реализовать через таблицу. Т.е. каждое новое сообщение находится внутри отдельной таблички.
Так вот при новом открытии сотрудником окна общения необходимо также перемещаться в самый низ документа. Для этого я посылаю сочетание клавиш Ctrl+End  (помидорами не кидаться, 1С по-другому не позволяет  ).
 
Если сделать, как ниже, то сочетание клавиш Ctrl+End не сработает.
 
<HTML><HEAD><META content="text/html; charset=utf-8" http-equiv=Content-Type><META name=GENERATOR content="MSHTML 8.00.7601.17514"></HEAD><BODY contenteditable="false"><!-- Client content begin --><TABLE style="WIDTH: 100%" border=1 cellSpacing=3 borderColor=white cellPadding=3 bgColor=#ffffe1><TBODY><TR borderColor=#ffffe1><TD><div contenteditable="true">Text1</div><TD></TR></TBODY></TABLE><!-- Client content end --></BODY></HTML>
 
Я думал, что может есть способ как-то задать свойства содержимого всео документа или таблицы, чтобы не появлялась лишняя строка после таблицы
Либо может существует javascript, который способен искусственно поставить курсор там где надо в html-документе (т.е. в нашем примере сразу после буквы "Z").
Тогда указанный вами способ подойдет.
Подскажите, пожалуйста, в какую сторону хотя бы копать.

Upd: javasript не подойдет, настройками безопасности отключен, не запускается

Link to comment
Share on other sites
  • 0
knyazevsergey Explorer

knyazevsergey

Posted
  • Author
Posted
Спасибо за помощь. Не буду больше мучать. Выяснилось, что 1Ска не поддерживает скрипты с установкой фокуса. Она просто не отрабатывает их. Старый в ней браузер, с ограниченными возможностями. А могло бы сработать это.

 

В общем пришел все-таки к решению, которое пока устраивает (вернее, это лучше чем ничего). В параметрах таблицы указываю align="LEFT". И курсор после таблицы становится уже не снизу, а справа от таблицы (т.е. строки как таковой ниже таблицы уже нет). После этого при загрузке документа посылаю нажатие клавиши "влево" :) (опять прошу помидорами не кидаться, другого не вижу решения).

И курсор становится прямо в таблице.

При этом ниже таблицы пользователь уже курсор мышкой не поставит! Что В общем-то и являлось целью.

 

Т.е. получилось так:



<HTML><HEAD>

<META content="text/html; charset=utf-8" http-equiv=Content-Type>

<META name=GENERATOR content="MSHTML 8.00.7601.17514"></HEAD>

<BODY contenteditable="true">

<TABLE style="WIDTH: 100%"  bgColor=#ffffe1 align="LEFT">

<TBODY>

<TR borderColor=#ffffe1>

<TD>Text XYZ</TD></TR></TBODY></TABLE>

</BODY></HTML>

 

Спасибо еще раз.

В итоге покажу, что получилось вообще в целом (для чего это все извращение было):


Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing

  • Обсуждения

    • Nikker
      Дизайн сайтов, landing page, логотипов, баннеров, шапок | Высокое качество, по хорошей цене

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ    
    • Nikker
      Брендовый дизайн в социальных сетях

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com   Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ   Портфолио https://www.behance.net/d4d4186e
    • Mondeus
      Вёрстка футера на движке Xenforo

      By Mondeus · Posted

      Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение.  .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  
    • torsar
      Примеры верстки

      By torsar · Posted

      Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок.
    • Katerina23
      Какой тег использовать, чтобы увеличивать число кнопками вверх-вниз?

      By Katerina23 · Posted

      Да, подходит. Спасибо.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept