Я могу встроить форматирование HTML в <текстовая область> тег?

Question

Я могу встроить форматирование HTML в <текстовая область> тег?

Если у меня есть a textarea блок как так...

<textarea name="myTextArea" cols="100" rows="20" readonly=readonly>
.. text area content ...
</textarea>

Как я могу встроить форматированный текст HTML в этом текстовом блоке? Если я могу, я полагал, что следующее должно работать...

<textarea name="myTextArea" cols="100" rows="20" readonly=readonly>
<b>Hello how are you today?</b>
</textarea>

Как пример. Но то предложение не обнаруживается как полужирное. Возможно, я просто пытаюсь сделать что-то, что не может быть сделано?

33

html

задан Rob Segal 5 April 2010 в 18:33

4 ответа

Accepted Answer

Я почти уверен, что ответ отрицательный - не могу сделать это с текстовым полем.

Из документации MDN :

HTML-элемент представляет собой многострочный элемент управления редактированием обычного текста. </p> <ul> <li> Разрешенное содержимое Текст </li> </ul> </blockquote> </div> <div class="votes-answer green"> <div class="vote-count" itemprop="upvoteCount">29</div><i class="fa fa-thumbs-o-up"></i> </div> <div class="clearfix"></div> <div class="action-time"> ответ дан <span title="27 November 2019 в 17:46 ">27 November 2019 в 17:46 </span> </div> <a class="s-link" href="/questions/306550/ja-mogu-vstroit-formatirovanie-html-v-lt-tekstovaja-oblast-gt-teg#584" title="поделиться">поделиться</a> </div> <div class="post-layout--right"> <div id="comments-805616"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> </ul> </div> </div> </div> </div> <div class="answer" id="808750" itemscope="" itemtype="http://schema.org/Answer"> <div class="answer-row"> <div class="answer-text"> <div class="description" itemprop="text"> <p> Нет! Если вы проверили это в документе HTML, то получите сообщение об ошибке в строке </p> <blockquote> <p> тип документа не допускает здесь элемент «b» </p> </blockquote> <p> То, что вы можете искать, это то, что вы видите -What-You-Get редактор, который на самом деле является <code> <iframe> </code>, который использует функцию JavaScript <code> designMode </code>. Можно найти <a href="http://www.devguru.com/features/tutorials/wysiwyg/wysiwyg1.asp" rel="nofollow noreferrer"> учебники о том, как создать эти </a> (<a href="https://web.archive.org/web/20100302145650/http://www.devguru.com:80/features/tutorials/wysiwyg/wysiwyg1.asp" rel="nofollow noreferrer"> архив </a>), но гораздо лучше использовать существующий, поскольку он будет действительно полезным и пригодным для использования дублем. много работы. </p> <p> Обратите внимание на то, что - если вас все еще интересует проверка, а это должно быть, если вы работаете с HTML, - вы не сможете использовать строгое объявление <code> DOCTYPE </code> в качестве Редактор WYSIWYG будет использовать <code> iframe </code>. </p> </div> <div class="votes-answer green"> <div class="vote-count" itemprop="upvoteCount">4</div><i class="fa fa-thumbs-o-up"></i> </div> <div class="clearfix"></div> <div class="action-time"> ответ дан <span title="27 November 2019 в 17:46 ">27 November 2019 в 17:46 </span> </div> <a class="s-link" href="/questions/306550/ja-mogu-vstroit-formatirovanie-html-v-lt-tekstovaja-oblast-gt-teg#584" title="поделиться">поделиться</a> </div> <div class="post-layout--right"> <div id="comments-808750"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> </ul> </div> </div> </div> </div> <div class="answer" id="805619" itemscope="" itemtype="http://schema.org/Answer"> <div class="answer-row"> <div class="answer-text"> <div class="description" itemprop="text"> <p> Вместо этого вам нужно создать редактор WYSIWYG. </p> <p><a href="http://tinymce.moxiecode.com/" rel="noreferrer"> Вот </a> отличный. </p> </div> <div class="votes-answer green"> <div class="vote-count" itemprop="upvoteCount">20</div><i class="fa fa-thumbs-o-up"></i> </div> <div class="clearfix"></div> <div class="action-time"> ответ дан <span title="27 November 2019 в 17:46 ">27 November 2019 в 17:46 </span> </div> <a class="s-link" href="/questions/306550/ja-mogu-vstroit-formatirovanie-html-v-lt-tekstovaja-oblast-gt-teg#584" title="поделиться">поделиться</a> </div> <div class="post-layout--right"> <div id="comments-805619"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> </ul> </div> </div> </div> </div> <div class="answer" id="810245" itemscope="" itemtype="http://schema.org/Answer"> <div class="answer-row"> <div class="answer-text"> <div class="description" itemprop="text"> <p> Вы можете сделать это (преобразовать "специальные" символы): </p> <pre><code><textarea name="myTextArea" cols="100" rows="20" readonly=readonly> <b>Hello how are you today?</b> </textarea> </code></pre> </div> <div class="votes-answer green"> <div class="vote-count" itemprop="upvoteCount">6</div><i class="fa fa-thumbs-o-up"></i> </div> <div class="clearfix"></div> <div class="action-time"> ответ дан <span title="27 November 2019 в 17:46 ">27 November 2019 в 17:46 </span> </div> <a class="s-link" href="/questions/306550/ja-mogu-vstroit-formatirovanie-html-v-lt-tekstovaja-oblast-gt-teg#584" title="поделиться">поделиться</a> </div> <div class="post-layout--right"> <div id="comments-810245"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> </ul> </div> </div> </div> </div> <div style="margin-top: 20px;"> Другие вопросы по тегам: <div class="tags" style="display: inline-block; float: none;"> <a href="/questions/tagged/html" class="tag" title="html" rel="tag">html</a> </div> <h3 class="m-t-20">Похожие вопросы:</h3> <div class="related-block"> <ul> <li><div class='votes-answer green'><span class='vote-count'>55</span> <i class="fa fa-thumbs-o-up"></i></div> <a href="/questions/87787/pochemu-by-ne-ispolzovat-tablicy-dlja-razmetki-v-html-zakryto" title="Почему бы не использовать таблицы для разметки в HTML? [закрыто]">Почему бы не использовать таблицы для разметки в HTML? [закрыто]</a> - 6 November 2018 00:07 </li> <li><div class='votes-answer green'><span class='vote-count'>36</span> <i class="fa fa-thumbs-o-up"></i></div> <a href="/questions/182086/skrytye-funkcii-html" title="Скрытые функции HTML">Скрытые функции HTML</a> - 23 May 2017 12:18 </li> <li><div class='votes-answer green'><span class='vote-count'>36</span> <i class="fa fa-thumbs-o-up"></i></div> <a href="/questions/90066/kak-sdelat-div-ne-bolshe-ego-soderzhimogo" title="Как сделать div не больше его содержимого?">Как сделать div не больше его содержимого?</a> - 20 September 2015 12:27 </li> <li><div class='votes-answer green'><span class='vote-count'>31</span> <i class="fa fa-thumbs-o-up"></i></div> <a href="/questions/11648/kak-fil-trovat-danny-e-massiva-v-javaz-cript-v-client-duplicate" title="Как фильтровать данные массива в Javascript в Client [duplicate] ">Как фильтровать данные массива в Javascript в Client [duplicate] </a> - 17 June 2015 03:09 </li> <li><div class='votes-answer green'><span class='vote-count'>30</span> <i class="fa fa-thumbs-o-up"></i></div> <a href="/questions/20015/kak-ya-mogu-sozdat-shablon-dlya-proverki-tega-html-s-lyuby-m-poryadkom-atributov-dublikat" title="Как я могу создать шаблон для проверки тега html с любым порядком атрибутов? [Дубликат] ">Как я могу создать шаблон для проверки тега html с любым порядком атрибутов? [Дубликат] </a> - 26 May 2012 21:37 </li> <li><div class='votes-answer green'><span class='vote-count'>30</span> <i class="fa fa-thumbs-o-up"></i></div> <a href="/questions/28171/chitat-i-otobrazhat-danny-e-iz-bazy-danny-x-v-fajl-excel-dublikat" title="читать и отображать данные из базы данных в файл excel [дубликат] ">читать и отображать данные из базы данных в файл excel [дубликат] </a> - 12 March 2018 02:52 </li> <li><div class='votes-answer green'><span class='vote-count'>30</span> <i class="fa fa-thumbs-o-up"></i></div> <a href="/questions/11689/poluchite-div-chtoby-prinyat-100-rost-minus-zagolovok-avtomaticheskoj-vy-soty-dublikat" title="Получите div, чтобы принять 100% рост, минус заголовок автоматической высоты [дубликат] ">Получите div, чтобы принять 100% рост, минус заголовок автоматической высоты [дубликат] </a> - 15 July 2015 15:37 </li> </ul> </div> </div> </div> </div> </div> <aside class="sidebar"> <div class="awrap"> <script async src="https://yastatic.net/pcode-native/loaders/loader.js"></script> <script> (yaads = window.yaads || []).push({ id: "553274-2", render: "#id-553274-2" }); </script> <div id="id-553274-2"></div> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:inline-block;width:300px;height:600px" data-ad-client="ca-pub-2355906945027976" data-ad-slot="8038370725"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </aside> </div> </div> <footer class="footer"> <div class="wrapper wrapper--sm"> <div class="footer-navs-col"> <div class="footer-nav footer-nav--menu"> <div class="footer-coryright">© 2017 - 2020 Вопросы и ответы по программированию</div> </div> <div class="footer-nav footer-nav--catalog"> </div> </div> <div class="footer-contacts-col"> <div class="soc-widget-col"> </div> </div> <div class="clearfix"></div> </div> </footer> </div> <script type="text/javascript" src="/js/ui/jquery-ui-1.8.16.custom.min.js"></script> <script type="text/javascript" src="/js/ui/external/jquery.cookie.js"></script> <script type="text/javascript" src="/js/versions/menu.ru.u1607887878.js"></script> <script type="text/javascript" src="/js/jquery.fancybox.min.js"></script> <script type="text/javascript" src="/js/slick.min.js"></script> <script type="text/javascript" src="/js/jquery.maskedinput.min.js"></script> <script type="text/javascript" src="/js/versions/scripts.ru.u1607887878.js"></script>  <script type="text/javascript" > (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; var z = null;m[i].l=1*new Date(); for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }} k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym"); ym(90030325, "init", { clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true }); </script> <noscript><div><img src="https://mc.yandex.ru/watch/90030325" style="position:absolute; left:-9999px;" alt="" /></div></noscript>   <script async src="https://www.googletagmanager.com/gtag/js?id=UA-123993370-1"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-123993370-1'); </script> </div> <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "WebSite", "name": "Программирование - вопросы и ответы", "alternateName": "Программирование - вопросы и ответы", "url": "https://legkovopros.ru", "potentialAction": { "@type": "SearchAction", "target": "https://legkovopros.ru/search?search={search_term_string}", "query-input": "required name=search_term_string" } } { "@context": "https://schema.org", "@type": "Organization", "name": "Программирование - вопросы и ответы", "url": "https://legkovopros.ru", "logo": "https://legkovopros.ru/i/logo.png", "email": "info@legkovopros.ru", "telephone": "" } </script> </body> </html>