textarea 相关问题

React <textarea> 当通过 value prop 传入值时，组件无法在 Chrome 中进行验证

我在使用Material-UI的TextField组件时偶然发现了这个问题。当在 TextField 上传递多行属性时，该组件设置为 ，当传递多行和 </desc> 时 <question vote="1"> <p>我在使用 Material-UI 的 TextField 组件时偶然发现了这个问题。在 TextField 上传递 multiline 属性时，组件设置为 <pre><code><textarea></code></pre>，同时传递 multiline 和 minlength 属性时，minlength 无法验证。我已将这个问题缩小到 <pre><code><textarea></code></pre> 元素，通过“value”属性传递值时也会出现同样的问题，但这仅发生在 Chrome 和 Edge 中，而不是 FireFox 中。 minlength 属性还会验证何时将值作为 <pre><code><textarea></code></pre> 的子级传入。</p> <p>这里是一个验证失败的例子：</p> <pre><code><form onSubmit={handleSubmit}> <textarea minLength={5} value={textareaValue} onChange={handleTextareaChange} /> <button type="submit">submit</button> </form> </code></pre> <p>这是测试的验证对象读数，其中我提交的字符少于 5 个，这应该会失败验证：</p> <pre><code>{ badInput: false, customError: false, patternMismatch: false, rangeOverflow: false, rangeUnderflow: false, stepMismatch: false, tooLong: false, tooShort: false, typeMismatch: false, valid: true, valueMissing: false } </code></pre> <p>在<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea" rel="nofollow noreferrer">这个 MDN 文档</a>中，它说“<pre><code><textarea></code></pre>不支持 value 属性”。但在<a href="https://react.dev/reference/react-dom/components/textarea" rel="nofollow noreferrer">这个 React 文档</a> 中，它说“您可以通过传递 value 属性来控制文本区域”。</p> <p>还有其他人遇到过这个问题吗？谢谢！</p> </question> <answer tick="false" vote="0"> <blockquote> <p>当值作为 <pre><code><textarea></code></pre> 的子级传入时，它也适用于任何浏览器。</p> </blockquote> <p><pre><code>minLength</code></pre>属性似乎工作正常，但<strong>仅当</strong>你的<pre><code>textarea</code></pre>是<em>不受控制</em>（没有<pre><code>value</code></pre>或<pre><code>onChange</code></pre>道具）。这是一个缺点，但也许在您的特定情况下，这可能就是您正在寻找的。</p> <p><a href="https://codesandbox.io/s/sharp-ardinghelli-rc5f63?file=/src/App.js" rel="nofollow noreferrer">https://codesandbox.io/s/sharp-ardinghelli-rc5f63?file=/src/App.js</a></p> <pre><code>export default function App() { return ( <div> <form onSubmit={handleSubmit}> <textarea minLength="5" /> <button type="submit">submit</button> </form> </div> ); } </code></pre> </answer> </body></html>

风格化文本区域的调整大小抓取器（右下角的那个东西）[重复]

是否可以以图形方式风格化文本区域的大小调整？我想给它不同的颜色和尺寸。

插入文本时如何在文本区域中创建新行？ [已关闭]

通过 PHP 插入文本时如何在文本区域中创建新行？ 我以为是 但这会直接打印在文本区域中。

以 Angular 形式创建文本区域 - 获取表单无法绑定错误

出现错误 无法绑定到“formGroup”，因为它不是“form”的已知属性。 我正在使用一个文本区域（控件名称“psapsearch”）创建表单组 psapmultiCircuitsearch 得到...

JavaFX| .setWrapText() 不会在 TextArea 中换行文本

我有一个 TextArea 控件，无论我是在其中键入还是加载文件内容，我都试图使文本换行、换行。我的 .setWrapText() 调用不起作用，我不确定...

从保存的文本区域反应显示换行符

使用 Facebook React。 在设置页面中，我有一个多行文本区域，用户可以在其中输入多行文本（在我的例子中是地址）。 当我尝试显示 </desc> <question vote="139"> <p>使用 Facebook <pre><code>React</code></pre>。 在设置页面中，我有一个多行 <pre><code>textarea</code></pre>，用户可以在其中输入多行文本（在我的例子中是地址）。 </p> <pre><code><textarea value={address} /> </code></pre> <p>当我尝试显示地址时，例如<pre><code>{address}</code></pre>之类的内容，它不会显示换行符并且全部在一行上。 </p> <pre><code><p>{address}</p> </code></pre> <p>有什么想法可以解决这个问题吗？ </p> </question> <answer tick="true" vote="379"> <p>没有理由使用JS。您可以使用 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/white-space" rel="noreferrer">white-space</a> CSS 属性轻松告诉浏览器如何处理换行符：</p> <pre><code>white-space: pre-line; </code></pre> <blockquote> <p>预上线</p> <p>空白序列被折叠。断线于 换行符，位于 <pre><code><br></code></pre>，并根据需要填充行框。</p> </blockquote> <p>看看这个演示：</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code><style> #p_wrap { white-space: pre-line; } </style> <textarea id="textarea"></textarea> <p id="p_standard"></p> <hr> <p id="p_wrap"></p> <script> textarea.addEventListener('keypress', function(e) { p_standard.textContent = e.target.value p_wrap.textContent = e.target.value }) </script></code></pre> </div> </div> <p></p> <p><a href="https://i.stack.imgur.com/mNI8T.png" target="_blank"><img src="https://cdn.imgupio.com/i/AWkuc3RhY2suaW1ndXIuY29tL21OSThULnBuZw==" alt=""/></a></p> </answer> <answer tick="false" vote="43"> <p>这是可以预料的，您需要转换新行（ ) 字符到 HTML 换行符 <br/></p> <p>一篇关于在 React 中使用它的文章：<a href="https://medium.com/@kevinsimper/react-newline-to-break-nl2br-a1c240ba746#.l9sbqp5aw" rel="noreferrer">React Newline to Break (nl2br)</a> </p> <p>引用文章：</p> <blockquote> <p>因为你知道 React 中的一切都是函数，所以你不能真正做到这一点</p> <pre><code>this.state.text.replace(/(?:\r\n|\r|\n)/g, '<br />') </code></pre> <p>因为这会返回一个内部包含 DOM 节点的字符串，所以这也是不允许的，因为必须只是一个字符串。</p> <p>然后你可以尝试做这样的事情：</p> <pre><code>{this.props.section.text.split(“\n”).map(function(item) { return ( {item} <br/> ) })} </code></pre> <p>这也是不允许的，因为 React 是纯函数，两个函数可以彼此相邻。</p> <p>tldr。解决方案</p> <pre><code>{this.props.section.text.split(“\n”).map(function(item) { return ( <span> {item} <br/> </span> ) })} </code></pre> <p>现在我们将每个换行符包装在一个跨度中，并且效果很好，因为跨度具有内联显示。现在我们有了一个有效的 nl2br 换行解决方案</p> </blockquote> </answer> <answer tick="false" vote="20"> <p>解决方案是在显示 <pre><code>white-space</code></pre> 内容的元素上设置属性 <pre><code>textarea</code></pre>:</p> <pre><code>white-space: pre-line; </code></pre> </answer> <answer tick="false" vote="4"> <p>Pete 之前提出的带有独立组件的提案是很好的解决方案，尽管它忽略了一件重要的事情。列表需要<a href="https://reactjs.org/docs/lists-and-keys.html#keys" rel="nofollow noreferrer">键</a>。我稍微调整了一下，我的版本（没有控制台警告）看起来像这样：</p> <pre><code>const NewLineToBr = ({ children = '' }) => children.split('\n') .reduce((arr, line, index) => arr.concat( <Fragment key={index}> {line} <br /> </Fragment>, ), []) </code></pre> <p>它使用 React 16 的 <a href="https://reactjs.org/docs/react-api.html#reactfragment" rel="nofollow noreferrer">Fragments</a></p> </answer> <answer tick="false" vote="3"> <p>对上述答案的一点补充： <pre><code>white-space</code></pre>属性最好与<pre><code>word-wrap</code></pre>一起使用，以防止溢出。</p> <pre><code>p { white-space: pre-wrap; word-wrap: break-word; } </code></pre> </answer> <answer tick="false" vote="2"> <p>从 React 16 开始，组件可以返回元素数组，这意味着您可以像这样创建组件：</p> <pre><code>export default function NewLineToBr({children = ""}){ return children.split('\n').reduce(function (arr,line) { return arr.concat( line, <br /> ); },[]); } </code></pre> <p>你会这样使用：</p> <pre><code><p> <NewLineToBr>{address}</NewLineToBr> </p> </code></pre> </answer> <answer tick="false" vote="0"> <p>喜欢网络版。我不知道Fragment组件，它是如此有用。不过不需要使用reduce方法。 地图就够了。另外，列表确实需要react中的键，但是使用迭代方法中的索引是个坏习惯。 eslint 不断地在我的警告中粉碎这个问题，直到我遇到了混淆错误。 所以它看起来像这样：</p> <pre><code>const NewLine = ({ children }) => children.split("\n").map(line => ( <Fragment key={uuidv4()}> {line} <br /> </Fragment> )); </code></pre> </answer> <answer tick="false" vote="0"> <p>使用浏览器打开此 html 页面。</p> <p>我的是铬115.0.5790.98</p> <p>#ExampalReactNewLines.html</p> <pre><code><!DOCTYPE html> <html> <head> <meta charset='UTF-8'> <title>ExampalReactNewLines</title> <script src='https://unpkg.com/babel-standalone@6.26.0/babel.js'></script> <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script> </head> <body> <div id='root'></div> <script type='text/babel'> function ExampalReactNewLines() { return ( <div> {` 1 newline 2 newline 3 newline 7 newline 2 newline 15 newline stop `.split(/\n{100}/).map((i,key) => {return <pre key={key}>{i}</pre>;}) } </div> ) } /////////////////////////////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////////////////////////////// ReactDOM.render(<ExampalReactNewLines />, document.querySelector('#root')); </script> </body> </html> </code></pre> </answer> </body></html>

在 QML TextArea 中单独选择时无法突出显示制表符

我正在使用 QML 中的 TextArea 组件进行文本编辑。有一个问题：当我尝试选择单个制表符 ( ) 字符时，它不会突出显示。问题是制表符不

如何以 JSON 格式保存代码片段

目前，我正在 MERN 中创建一个代码片段管理器，我想以 JSON 格式存储代码片段。我怎样才能实现这个目标？使用简单的文本区域足以获取代码吗？我怎样才能...

文本区域内的线条着色

有没有办法让textarea显示彩色线条？我想要实现的是每隔一行都着色，即白色，灰色，白色，灰色，白色，灰色......以获得更好的可读性。用户支持...

Extjs经典：resizing=true的Textarea无法调整大小

我创建了这个小提琴：https://fiddle.sencha.com/#view/editor&fiddle/3mh2。如果运行它，您会发现无法调整文本区域的大小，即使它具有 resizing: true 属性。 分机申请...

php :: 文本区域中的新行？

通过 php 插入文本时如何在文本区域中创建新行？ 我以为是 但这实际上是打印在文本区域中的。 谢谢

HTML5 文本区域占位符未出现

我无法弄清楚我的标记有什么问题，但文本区域的占位符不会出现。看起来好像它可能被一些空格和制表符覆盖。当你专注于

有没有办法使文本区域部分可编辑？ （仅使部分文本可编辑）

我刚刚遇到一种情况，其中只有部分文本区域（之前加载了文本）可编辑，而其他部分则不可编辑（“灰显”，所以...

插入特定字符（例如）时，QML TextArea 内的文本将变得不可见

我有一个 C++ 和 QML 应用程序，其中有一个用于用户输入的 TextArea 组件。但是，我遇到了一个问题，当我尝试插入时，TextArea 内的文本变得完全不可见...

新行的正则表达式在 textarea jQuery 中不起作用

我正在尝试转换从路由器复制的返回输出，该输出由多个 到新行作为带有缩进的漂亮结果配置，供用户从 UI 查看。但是我的剧本...

使用 javascript 检测文本区域中的选定文本

是否可以使用 Javascript 检测在文本区域中选择了哪些文本？我希望仅在用户选择文本时显示用户控件

Angular textarea不能用默认值填充

我正在尝试为我的 Angular 文本区域设置一个默认值。我想我已经尝试了所有可能的方法。没有任何效果。我有一个html模板 <p>我正在尝试为我的 Angular 文本区域设置一个默认值。我想我已经尝试了所有可能的方法。没有任何效果。我有一个html模板</p> <pre><code><textarea ng-model="title" required class="textbox" id="feedbackInput" ng-init="title= initvalue"></textarea> </code></pre> <p>连接到组件

当文本字段或文本区域使用纯 JavaScript 获得焦点时禁用键盘快捷键

我有一个简单的脚本，它使用向左和向右箭头移动到下一篇和上一篇博文。 var nextEl = document.getElementById("pagination__next__link"); var prevEl = document.getElementById("

用 wp_editor() Wordpress 替换后元中的文本区域

我有用于后元的文本区域： <?php echo get_post_meta($post->ID, '</desc> <question vote="0"> <p>我有用于后元的文本区域：</p> <pre><code><textarea id ="product_description" style="width: 100%" name="product_description"><?php echo get_post_meta($post->ID, 'product_description', true); ?></textarea> if ( isset( $_POST[ 'product_description' ] ) ) { update_post_meta( $post_id, 'product_description', sanitize_text_field($_POST['product_description']) ); } </code></pre> <p>我想用 wp_editor() 改变文本区域。请帮助我..我试图找到各种评论但失败了......</p> </question> <answer tick="false" vote="0"> <p>要使用 wp_editor() 将 textarea 替换为 WordPress 编辑器，您需要将 textarea 标签替换为输出 WordPress 编辑器的函数调用。</p> <p>这里是一个如何做的例子：</p> <p>用以下代码替换现有的文本区域：</p> <pre><code><?php $content = get_post_meta( $post->ID, 'product_description', true ); $editor_id = 'product_description_editor'; $settings = array( 'textarea_name' => 'product_description', 'media_buttons' => false, 'textarea_rows' => 10, 'teeny' => true, 'quicktags' => false ); wp_editor( $content, $editor_id, $settings ); ?> </code></pre> <p>这将输出 WordPress 编辑器而不是文本区域。请注意，wp_editor 函数有几个参数，包括编辑器中要显示的内容、编辑器 ID 和各种设置。</p> <p>确保用以下代码替换现有的 if ( isset( $_POST[ 'product_description' ] ) ) { ... } 代码：</p> <pre><code><?php if ( isset( $_POST[ 'product_description' ] ) ) { update_post_meta( $post_id, 'product_description', wp_kses_post( $_POST[ 'product_description' ] ) ); } ?> </code></pre> <p>wp_kses_post 函数用于在将编辑器内容保存到数据库之前对其进行清理。此功能允许基本的 HTML 标签和属性，同时删除潜在危险的脚本标签和属性。</p> <p>希望对您有所帮助！</p> </answer> </body></html>

如何将打印到控制台的值放入 TextArea

我目前正在研究一个利息计算器，我正在尝试将“i=0”到“i-1”的方法 interestEarned 返回的所有值都放入 TextArea 中。每...