textarea是一个HTML元素（标记），用于创建多行纯文本编辑字段。
这看起来很简单，但我一直找不到答案。在我的 Blazor 服务器端程序中，我有一个弹出电子邮件表单，我预先填充了文本，然后用户可以对其进行编辑并单击发送...
我正在尝试删除右下角中的点。 这是我的意思的一个例子（来自 Chrome）： 如何去掉那些对角线？</desc> <question vote="99"> <p>我正在尝试删除右下角<pre><code><textarea></code></pre>中的点。</p> <p>这是我的意思的一个例子（来自 Chrome）：<br/> <a href="https://i.sstatic.net/DMc9d.png" rel="noreferrer"><img src="https://cdn.txt58.com/i/AWkuc3N0YXRpYy5uZXQvRE1jOWQucG5n" alt="example"/></a></p> <p>如何去除那些对角线？</p> </question> <answer tick="false" vote="169"> <p>只需添加您的<pre><code>CSS</code></pre>文件</p> <pre><code>textarea { resize: none; } </code></pre> <p>稍后（2019）编辑： 与我的这个答案以及应用于 <pre><code>resize: none</code></pre> 元素的 <pre><code>textarea</code></pre> 声明上不断增加的 GitHub 代码搜索结果相关，我写了一些行来说明为什么我认为 <pre><code>textarea</code></pre> 上的 CSS resize none 对 UX 不利：</p> <blockquote> <p>通常，文本区域仅限于行数和列数，或者具有通过 CSS 定义的固定宽度和高度。仅根据我自己的经验，在论坛上回复、在网站上填写联系表格、填写实时聊天弹出窗口甚至在 Twitter 上发送私人消息时，这非常令人沮丧。</p> <p>有时您需要输入由许多段落组成的长回复，并且将该文本包装在一个很小的文本区域框中，这使得您在输入时难以理解和遵循。有很多次，我不得不在 Notepad++ 中编写该文本，然后将整个回复粘贴到那个小文本区域中。我承认我还打开了 DevTools 来覆盖 resize: none 声明，但这并不是真正有效的做事方式。</p> <p>来自 <a href="https://catalin.red/css-resize-none-is-bad-for-ux/" rel="noreferrer">https://catalin.red/css-resize-none-is-bad-for-ux/</a></p> </blockquote> <p>因此，在将上述内容添加到样式表之前，您可能需要检查一下。</p> </answer> <answer tick="false" vote="5"> <p>就像下面的代码一样简单。只需给文本区域设置样式<pre><code>resize: none</code></pre></p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code><textarea style="resize: none"></textarea></code></pre> </div> </div> <p></p> </answer> <answer tick="false" vote="0"> <pre><code>textarea::-webkit-resizer{ display: none; } </code></pre> </answer> <answer tick="false" vote="-1"> <p><strong>html</strong></p> <p><strong>萨斯</strong></p> <pre><code>textarea { position: relative; z-index: 1; min-width: 1141px; min-height: 58px; } .resizer { position: relative; display: inline-block; &:after { content: ""; border-top: 8px solid #1c87c7; border-left: 8px solid transparent; border-right: 8px solid transparent; -webkit-transform: rotate(-45deg); z-index: 1; opacity: 0.5; position: absolute; bottom: 1px; right: -3px; pointer-events: none; } } .arrow-resizer-textarea { height: 0; width: 0; border-top: 8px solid #1c87c7; border-left: 8px solid transparent; border-right: 8px solid transparent; -webkit-transform: rotate(-45deg); position: absolute; bottom: 1px; right: -3px; pointer-events: none; z-index: 2; } </code></pre> </answer> </body></html>
我想知道 Yii2 的默认文本区域默认不显示换行符。并且 Yii2 模型不会将换行符保存到数据库中。 我在 Yii2 文档中没有找到任何内容...
我希望当我将鼠标悬停在上时出现，您想提供反馈吗？。换句话说，我想要 和 <p>我们怎样才能...</desc> <question vote="0"> <p>我希望当我将鼠标悬停在 <pre><code><div id="Feedback"></code></pre> 上时出现 <pre><code><p>Would you like to give feedback?</p></code></pre>。换句话说，当我将鼠标悬停在该 p 元素上时，我希望 <pre><code><textarea></code></pre> 和 <pre><code><p>How can we imporve the page?</p></code></pre> 将其显示设置为“阻止”。</p> <p>这是我尝试过的：</p> <pre><code><!DOCTYPE html> <html> <head> <title>Sign up</title> <link href="./account.css" rel="stylesheet"> </head> <body> <div id="entire-form"> <form action="form.html" method="GET"> <h1><b>Sign up =)</b></h1> <div id="Feedback"> <p>Would you like to give feedback?</p> <p>How can we imporve the page?</p> <textarea name="improve" id="improve" rows="10" cols="70"></textarea> </div> </form> </div> </body> </html> </code></pre> <pre><code>textarea, #Feedback p{ display: none; } #Feedback p:nth-child(1) { /*What this does is it looks in the div with the id Feedback and its p elements and selects the first child i.e. the p that comes first*/ display: block; margin: 15px; } #Feedback p:nth-child(1):hover{ display: block; } </code></pre> </question> <answer tick="false" vote="0"> <p>如果没有<pre><code>JavaScript</code></pre>，你就无法实现这一目标。我对您的代码进行了一些更改，涉及使用正确的 <pre><code>HTML</code></pre> 元素及其顺序来实现所需的功能。我还更新了您的<pre><code>CSS</code></pre>部分。</p> 当用户将鼠标悬停在其上或输入内容时，<p><pre><code>textarea</code></pre>将保持可见。</p> <p>我希望这能解决您的问题。您可以根据自己的意愿进行进一步的更改。</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>document.addEventListener("DOMContentLoaded", function () { const hoverLine = document.querySelector(".hover-line"); const textareaContainer = document.getElementById( "feedback-input-container" ); const textarea = document.getElementById("improve"); function showTextarea() { textareaContainer.style.display = "flex"; } function hideTextarea() { if (!textarea.value.trim()) { textareaContainer.style.display = "none"; } } hoverLine.addEventListener("mouseover", showTextarea); textareaContainer.addEventListener("mouseover", showTextarea); textareaContainer.addEventListener("mouseout", hideTextarea); textarea.addEventListener("focus", showTextarea); textarea.addEventListener("input", showTextarea); textarea.addEventListener("blur", hideTextarea); });</code></pre> <pre><code>.hover-line { cursor: pointer; } #feedback-input-container { display: none; flex-direction: column; align-items: start; gap: 3px; margin-top: 5px; }</code></pre> <pre><code><h1>Sign up =)</h1> <form action="form.html" method="GET"> <label class="hover-line">Would you like to give feedback?</label> <div id="feedback-input-container"> <label>How can we improve the page?</label> <textarea name="improve" id="improve" rows="10" cols="70"></textarea> <button type="submit" name="submit">Submit</button> </div> </form></code></pre> </div> </div> <p></p> </answer> </body></html>
我正在按照这个问题的答案将转换为新行。 我正在使用 <?php echo str_repla...</desc> <question vote="0"> <p>我正在按照<pre>这个问题的答案</pre>将<a href="https://stackoverflow.com/questions/6004343/converting-br-into-a-new-line-for-use-in-a-text-area"><code><br/></code></a>转换为新行。</p> <p>我正在使用</p> <pre><code><textarea name="newtext" style="margin: 0px; width: 550px; height: 120px;"><?php echo str_replace("<br />", "\r\n", $posttext['text']); ?></textarea> </code></pre> <p>对我来说。 我的代码用于编辑文本字段。 </p> <p>我的问题是当我编辑像</p>这样的文本时 <p><pre><code>hi I am here</code></pre></p> <p>正在显示 </p> <pre><code>hi I am here </code></pre> <p>当我重新编辑它时，它就像</p> <pre><code>hi I am here </code></pre> <p>我需要做什么来解决这个问题？ 这里要提一下，当我保存此文本时，我正在使用</p> <pre><code>$texttrim = trim($_POST['newtext']); $newtexts = nl2br($texttrim); </code></pre> </question> <answer tick="false" vote="0"> <ul> <li><p>您的环境/操作系统将 <pre><code>\r</code></pre> 解释为换行符，并将 <pre><code>\n</code></pre> 解释为换行符——而不是将 <pre><code>\r\n</code></pre> 视为单个换行符序列。 如果您想用单个换行符减少双换行符，那么只需 <pre><code>str_replace("\r", '', $posttext['text'])</code></pre> 或只是不要首先添加 <pre><code>\r</code></pre> 字符。</p> </li> <li><p><a href="https://www.php.net/manual/en/function.nl2br.php" rel="nofollow noreferrer"><pre><code>nl2br()</code></pre></a>是一个欺骗性的/命名不当的函数。 它不会“将换行序列转换为 br 标签”；它实际上在每个换行序列前面添加 br 标签。</p> </li> <li><p>因此，脚本中没有任何部分实际消耗/破坏换行符序列。</p> </li> <li><p>在文本的每次后续“重新加载”中，<pre><code>str_replace("<br />", "\r\n", $posttext['text'])</code></pre>，每个 br 标签都将被替换为另外两个换行符（除了先前版本预先存在的换行符之外）。 这就是为什么您会观察到文本中换行符不必要的增长。</p> </li> </ul> <p>我建议您将 <pre><code>nl2br($texttrim)</code></pre> 替换为 <pre><code>preg_replace('/\R/', '<br />', $texttrim)</code></pre> 以实际使用换行符序列，并在一对一转换中将其替换为 br 标签。 这将消除过多的换行符。</p> </answer> </body></html>
这是这样的场景：用户正在 CKeditor 中输入内容，编辑器外面有一个按钮，按下时 jQuery 会启动 $(".button").click(function... 并且这会附加一些文本或其他内容
我在 Chrome 中尝试过这个。有一个文本区域，里面有很多文本，最后编辑部分会变得非常慢。光标和键盘输入响应变得缓慢。 但如果我做到了...
每当有人在文本区域中按 Enter 键时，我就会调用一个函数。现在我想在按下回车键时禁用换行或换行。 因此，当按下 Shift+Enter 时，新行应该起作用。在那...
我想在单击“保存”按钮后将文本区域的内容保存到客户端计算机中的文本文件中。我的代码可以工作，但 HTML 代码也包含在文本文件中。 这是我的代码： 如果（是...
(document.getElementById('textarea').length > 0) 不起作用。除了这个还有谁知道吗？ 将要 这是我之前问题中未得到解答的场景。我有里克...
如何更改文本区域的字体大小而不影响文本区域框的宽度？ 我知道通过应用CSS，例如： 文本区域{ 字体大小：16px； } 然而它会影响文本区域的大小。
我想让只读输入看起来像带有 CSS 的 pre 或 div 标签。 我本以为使用文本区域很容易做到，但这似乎是一项艰巨的任务。我可以隐藏
我在应用程序中使用文本区域组件，并且动态控制它们的高度。当用户键入时，只要有足够的文本，高度就会增加。这在 IE、Firefox 和
我一直在尝试寻找一种解决方案来禁用文本区域中的调整大小图标或任何启用了调整大小属性的内容，但仍然找不到解决方案。有人可以帮我吗？
javascript：获取textarea的内容，textContent与innerHTML与innerText
我在使用 js 获取文本区域的内容时遇到问题。 我觉得我以前已经这样做过很多次了，没有任何问题，但有些东西把它扔掉了，或者我有精神障碍。 html <
我有一个 React JS Web 应用程序。我有一个自定义主题，所有组件都会改变颜色，但 TextArea 不会。当我观看 Inspector 时，TextAra 使用“--nextui-default-100: 240 3.7% 15.88%;”但我尝试过
构造“ResizeObserver”失败：参数1不是“Function”类型
我正在尝试在textarea内渲染HTML，并且我有一个来自控制器的ajax调用来读取该值并将其解析为render()函数的var。 我在这里关注了这个问题 然而，任...
根据w3学校支持onresize，但它不起作用。 http://www.w3schools.com/jsref/event_onresize.asp 浏览器尝试过： 铬25.0.1364.172 Safari 6.0.3 (7536....</desc> <question vote="5"> <p>根据w3学校<pre><code><textarea></code></pre>支持<pre><code>onresize</code></pre>但是它不起作用。</p> <p><a href="http://www.w3schools.com/jsref/event_onresize.asp" rel="noreferrer">http://www.w3schools.com/jsref/event_onresize.asp</a></p> <p>尝试过的浏览器：</p> <p>Chrome 25.0.1364.172</p> <p>Safari 6.0.3 (7536.28.10) </p> <p>火狐19.0</p> <p>小提琴：<a href="http://jsfiddle.net/btevfik/5abR3/" rel="noreferrer">http://jsfiddle.net/btevfik/5abR3/</a></p> <p><strong>更新</strong></p> <p>当我吸取教训不要100%相信w3schools时，我发现了这个</p> <p><a href="https://developer.mozilla.org/en-US/docs/DOM/element.onresize" rel="noreferrer">https://developer.mozilla.org/en-US/docs/DOM/element.onresize</a></p> </question> <answer tick="false" vote="4"> <p>大多数浏览器仅触发 body 元素上的 onresize。</p> <p>到目前为止，我发现的最好的解决方案是在一个漂亮的 hack 中使用溢出和下溢事件侦听器。</p> <p><a href="http://www.backalleycoder.com/2013/03/18/cross-browser-event-based-element-resize-detection/" rel="nofollow">http://www.backalleycoder.com/2013/03/18/cross-browser-event-based-element-resize-detection/</a></p> <p>它是纯 JavaScript。</p> </answer> <answer tick="true" vote="2"> <p>文本区域在大多数（所有）浏览器中都不会调整大小<strong>onresize</strong>事件<strong>不适用于</strong>窗口对象，在这种情况下，您可以使用 jQuery UI 插件：</p> <pre><code>$("idoftextarea").resizable({ resize: function() { $("id").append("yourcode"); } }); </code></pre> <p>参考：<a href="http://jqueryui.com/resizable/" rel="nofollow">http://jqueryui.com/ressized/</a></p> </answer> <answer tick="false" vote="2"> <p>一个小解决方法：</p> <pre><code>$('textarea').bind('mouseup', function() { console.log('resized'); }); </code></pre> </answer> <answer tick="false" vote="1"> <p>只是对 ravula 答案的更新（我的声誉太低，无法发表评论）：</p> <p>JQuery 将一堆 div 添加到可调整大小的元素中。就我而言，这破坏了整个布局。您可以使用以下方法消除额外的边距/填充：</p> <p></p><div data-hide="false" data-lang="js"> <div> <pre><code>.ui-wrapper { padding:0px !important; margin:0px !important; }</code></pre> </div> </div> 这当然不是很干净，也是我造成问题的原因，但它在我的情况下有效。如果我遇到任何问题，我会更新这篇文章。<p></p> </answer> <answer tick="false" vote="1"> <p>无论出于何种原因，我都喜欢坚持使用 vanilla js。所以这是一个简单的香草解决方案：</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="false"> <div> <pre><code><textarea onmousedown="storeDimensions(this)" onmouseup="onresizeMaybe(this)" ></textarea> <script> function storeDimensions(element){ element.textWidth = element.offsetWidth; element.textHeight = element.offsetHeight; element.value = "is it gonna change? we don't know yet..."; } function onresizeMaybe(element){ if (element.textWidth===element.offsetWidth && element.textHeight===element.offsetHeight) element.value = "no change.\n"; else element.value ="RESIZED!\n"; element.value += `width: ${element.textWidth}\n` +`height: ${element.textHeight}`; } </script></code></pre> </div> </div> <p></p> <p>对于家庭作业，请使用 <pre><code>onmousemove</code></pre> 来触发调整大小事件，而不是 <pre><code>onmouseup</code></pre>（在我的特定情况下我不需要）。</p> <p>:) 希望有一天它能对某人有所帮助……这个问题已经有 5 年历史了。</p> </answer> <answer tick="false" vote="0"> <p>您可以使用ResizeObserver API：</p> <pre><code>const textarea = document.getElementById('your-textarea'); function onResize() { console.log('width:', textarea.offsetWidth); console.log('height:', textarea.offsetHeight); } new ResizeObserver(onResize).observe(textarea); </code></pre> </answer> </body></html>
我试图在文本区域的插入符号下方显示一个弹出窗口。这意味着我需要 X 和 Y 坐标。 我目前正在尝试以这种方式实现它： 最终 var textFieldBounds = 输入。
<textarea>.value 跨站脚本 (XSS) 安全吗？
我正在为一个工具编写一个静态页面：用户粘贴到base64中，它会被转换为纯文本。这并不重要，但因为上下文是加密的，所以我想防止 XSS。 我注意到...