textarea 相关问题

textarea是一个HTML元素（标记），用于创建多行纯文本编辑字段。

Textarea - 设置属性时出现问题

我正在保存一个div的innerHTML，其中包含多个表单输入，包括文本区域、选择和文本框。我使用 onkeyup 或 onchange 处理程序和

javascript textarea setattribute

回答 1 投票 0

JavaFX：从第一个窗口设置第二个窗口中的 TextArea 内容时出现空指针异常

我正在使用 JavaFX 并创建两个窗口应用程序，一个用于浏览文件，另一个用于显示其内容问题是当我访问 inputText.setText(

java user-interface javafx textarea fxml

回答 1 投票 0

如何以动态方式使<textarea>元素的一部分不可编辑？

我有一个元素，用户可以在其中输入文本。我想创建一个条件，仅可以编辑文本区域中写入的最后 10 个字符。例如用户写：M...</desc> <question vote="0"> <p>我有一个 <pre><code><textarea></code></pre> 元素，用户可以在其中输入文本。我想创建一个条件，仅可以编辑文本区域中写入的最后 10 个字符。</p> <p>例如用户写入：<pre><code>My name is Joe.</code></pre> 在这种情况下，用户只能编辑以下部分：<pre><code>me is Joe.</code></pre>。</p> <p>我也希望它是动态的，这意味着如果用户继续编写：<pre><code>My name is Joe. I am 30 years old.</code></pre>，那么可编辑部分将是：<pre><code>years old.</code></pre></p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code><div id="container"> <textarea id="inputText" name="inputText" wrap="soft"></textarea> </div></code></pre> </div> </div> <p></p> <p>有人对如何使用 JavaScript 实现这一点有建议吗？</p> </question> <answer tick="false" vote="0"> <p>这可以使用 JavaScript 来完成。您必须侦听该文本区域的“输入”事件（为了可靠，还必须侦听 onchange 事件）。当用户输入您的内容时，必须将该文本区域的状态保存到内存中的变量中，然后在每次输入后，您必须检查第一部分（不允许编辑）是否仍然匹配，如果不匹配，则将文本区域内容替换为您的已保存状态。</p> <p>让我展示一些代码的演示：</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>var input = document.querySelector("#inputText"); var currentValue = ""; var restrictedLength = 0; input.addEventListener("input", function(){ var restrictedPart = currentValue.substr(0,restrictedLength ); var isAllowedEdit = input.value.length>=restrictedLength && input.value.substr(0,restrictedLength) == restrictedPart; if( isAllowedEdit ){ currentValue = input.value; var newRstrictedLength = currentValue.length-10; if( newRstrictedLength>=restrictedLength) { restrictedLength = newRstrictedLength; } } else { input.value = currentValue; } });</code></pre> <pre><code><div id="container"> <textarea id="inputText" name="inputText" wrap="soft"></textarea> </div></code></pre> </div> </div> <p></p> <p>请记住，这段代码只是一个想法，选择文本的一部分并粘贴内容（而不是逐个字母地书写）会产生一些奇怪的行为。您也应该考虑覆盖该部分。</p> </answer> </body></html>

javascript html textarea

回答 0 投票 0

如何使文本溢出：省略号在react.js + tailwind css 中的文本区域上工作

我遇到了文本溢出问题：在我的项目中，当在 div 上使用顺风截断以及文本内容被包装到的组件时，省略号无法正常工作。文本溢出是 </desc> <question vote="0"> <p>我有一个文本溢出问题：在我的项目中，当在 div 上使用顺风截断以及文本内容被包装到 <pre><code><textarea/></code></pre> 的组件时，省略号无法正常工作。文本溢出已隐藏，但未显示 3 个点。</p> <p>这是一个简化的代码片段：</p> <pre><code><div onClick={someFunction} className="relative inline-block max-w-24 h-6 truncate"> <someComponent content={props.content} //this component is a read only textarea /> <div className="absolute left-0 right-0 top-0 bottom-0"></div> </div> </code></pre> <p>组件代码：</p> <pre><code><textarea className="inline-block text-inherit bg-inherit max-w-full max-h-full" defaultValue={props.content} readOnly={true} /> </code></pre> <p>我尝试了不同的显示，如<pre><code>display : inline, inline-block, block, flex</code></pre>等，以及用<pre><code>overflow: hidden; text-overflow: ellipsis; white-space: nowrap;</code></pre></p>替代顺风截断 </question> <answer tick="false" vote="0"> <p><a href="https://play.tailwindcss.com/Vhp6jQnyvh" rel="nofollow noreferrer">看起来</a>这不是<pre><code><textarea></code></pre>想要的行为方式。这个问题也在这里讨论过：<a href="https://stackoverflow.com/questions/40921849/text-overflow-ellipsis-not-work-on-textarea">text-overflow: ellipsis not work on TextArea</a></p> </answer> </body></html>

reactjs tailwind-css textarea truncate ellipsis

回答 0 投票 0

在 HTML 文本区域字段中强制执行最大字节数[重复]

我试图将文本区域中输入的 unicode 字符数限制为 500。当我尝试发布表单并获取文本区域内容以在后端检查其长度时，我得到了双倍长度，

php html textarea

回答 3 投票 0

在 HTML 文本区域字段中强制执行最大字节数

我试图将文本区域中输入的 unicode 字符数限制为 500。当我尝试发布表单并获取文本区域内容以在后端检查其长度时，我得到了双倍长度，

php html textarea

回答 3 投票 0

SwiftUI：如何删除 macOS 上的文本选择

我有两个简单的文本区域，其中包含文本：导入 SwiftUI 结构ContentView：视图 { @State private var text1 = "Acing cipsusto dictumst ut nisim mincidunt bibendum nostra; tisi nis...

macos swiftui textarea

回答 1 投票 0

将 HTML5 文本区域内容保存到文件

有人可以帮我将 HTML5 textArea 的内容保存到文件中吗？最好使用 JavaScript？此处注释... 有人可以帮助我将 HTML5 textArea 的内容保存到文件中，最好使用 JavaScript 吗？ <textarea id="textArea"> Notes here... </textarea> <button type="button" value="save"> Save</button> 应该可以了。 function saveTextAsFile() { var textToWrite = document.getElementById('textArea').value; var textFileAsBlob = new Blob([ textToWrite ], { type: 'text/plain' }); var fileNameToSaveAs = "file.txt"; //filename.extension var downloadLink = document.createElement("a"); downloadLink.download = fileNameToSaveAs; downloadLink.innerHTML = "Download File"; if (window.webkitURL != null) { // Chrome allows the link to be clicked without actually adding it to the DOM. downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob); } else { // Firefox requires the link to be added to the DOM before it can be clicked. downloadLink.href = window.URL.createObjectURL(textFileAsBlob); downloadLink.onclick = destroyClickedElement; downloadLink.style.display = "none"; document.body.appendChild(downloadLink); } downloadLink.click(); } var button = document.getElementById('save'); button.addEventListener('click', saveTextAsFile); function destroyClickedElement(event) { // remove the link from the DOM document.body.removeChild(event.target); } #textArea { display: block; width: 100%; } <textarea id="textArea" rows="3"> Notes here... </textarea> <button type="button" value="save" id="save">Save</button> JSFiddle 答案中代码的简化版本： function download(){ var text = document.getElementById("my-textarea").value; text = text.replace(/\n/g, "\r\n"); // To retain the Line breaks. var blob = new Blob([text], { type: "text/plain"}); var anchor = document.createElement("a"); anchor.download = "my-filename.txt"; anchor.href = window.URL.createObjectURL(blob); anchor.target ="_blank"; anchor.style.display = "none"; // just to be safe! document.body.appendChild(anchor); anchor.click(); document.body.removeChild(anchor); } 和 html： <textarea id="my-textarea"> Notes here... </textarea> <button type="button" onclick="download()">Save</button> 我测试了engincancan的答案，它几乎就在那里，但不完全是。首先，“ecc.plist”的文件格式在任何地方都无法识别。其次，为了使代码能够在 Safari、Chrome 和 Firefox 的桌面上运行，您必须使用现有的锚标记而不是创建锚标记 (document.createElement('a'))。 destroyClickedElement 方法仅适用于 Chrome，因为它是如此宽容和宽容。并且，为了使下载能够在 Firefox 中运行，您必须拥有 document.body.appendChild(downloadLink.download); 我还想将本地存储文本保存到文件中以供下载，并且代码可以在 Mac 上的 Safari、Chrome 和 Firefox 桌面上运行。但是，我认为在 iOS 中不可能使用 Chrome 或 Firefox 将 Blob() 保存在任何地方。它确实有效，有趣的是在 Safari 中。例如，我可以将文本文件保存到我的奇妙清单应用程序中。这是我在 Github 上的存储库的链接：Github gh-pages 上的猫语者这是 JavaScript 代码： const fileDownloadButton = document.getElementById('save'); function localStorageToFile() { const csv = JSON.stringify(localStorage['autosave']); const csvAsBlob = new Blob([csv], {type: 'text/plain'}); const fileNameToSaveAs = 'local-storage.txt'; const downloadLink = document.getElementById('save'); downloadLink.download = fileNameToSaveAs; if (window.URL !== null) { // Chrome allows the link to be clicked without actually adding it to the DOM downloadLink.href = window.URL.createObjectURL(csvAsBlob); downloadLink.target = `_blank`; } else { downloadLink.href = window.URL.createObjectURL(csvAsBlob); downloadLink.target = `_blank`; downloadLink.style.display = 'none'; // add .download so works in Firefox desktop. document.body.appendChild(downloadLink.download); } downloadLink.click(); } // file download button event listener fileDownloadButton.addEventListener('click', localStorageToFile); <textarea id = "textArea"> Notes here... </textarea> <button onclick="savetextarea()" type="button">Save</button> <script> function savetextarea(){ var txt = document.getElementById("textArea").value; document.getElementById("saveinput").value = txt; document.forms["aForm"].submit(); } </script> <form action="savecontent" name="aForm"> <input id="saveinput" type="hidden" name="filecontent" value=""> </form>

javascript html save textarea

回答 4 投票 0

如何在一次输入中将多个文本区域转换为html段落？

我有一段代码可以生成带有文本的新文本区域，并将其保存为输入中的 html 段落 ()，但我的代码无法保存多个文本区域，当我尝试执行此操作时，我只得到未定义的我有一段代码可以生成带有文本的新文本区域，并将其保存为输入中的 html 段落 (<p>)，但我的代码无法保存多个文本区域，当我尝试执行此操作时，我只得到 undefined 输出。有一个选项可以保存多个文本区域吗？这是我的代码： (function () { var textbox = document.getElementById('textbox'); var txtBtn = document.getElementById('addTxt'); var webB = document.getElementById('webB'); var currentIndex = 0; txtBtn.addEventListener("click", createTxt); function createTxt() { var txtTyper = document.createElement('textarea'); txtTyper.innerText = 'Type text here'; txtTyper.id = 'txtTyper'; webB.appendChild(txtTyper); txtTyper.style.cursor = 'auto'; let count = 0; var txtTypers = document.querySelectorAll("#txtTyper"); txtTypers.forEach((element, currentIndex) => { count = count + 1; element.classList.add(`Typer-${count}`); }); } setInterval(function addValue() { var txtTyperw = document.querySelectorAll("#txtTyper"); textbox.value ='<p style="height:' + txtTyperw.offsetHeight + 'px;width:' + txtTyperw.offsetWidth + 'px;">' + txtTyperw.value + '</p>'; }, 0001); })(); <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css" rel="stylesheet"/> <div class="btnP"> <button id="addTxt" class="btn btn-primary" title="Add text block"><i class="bi bi-textarea-t fs-4"></i></button> </div> <input style="height:50px;width:100%" id="textbox"> <div class="webB" id="webB"> </div> CodePen：https://codepen.io/Puma-Murca/pen/XWOYxGK 注意：我是 JavaScript 初学者，我正在使用外部库（Bootstrap），因此我需要不使用 jQuery 的答案。 querySelectorAll返回一个NodeList，而不是单个节点也许是这样的？注意，使用 requestAnimationFrame 而不是 setInterval - 这意味着它仅在“视觉上”需要时调用 addValue (function () { var textbox = document.getElementById('textbox'); var txtBtn = document.getElementById('addTxt'); var webB = document.getElementById('webB'); var currentIndex = 0; txtBtn.addEventListener("click", createTxt); function createTxt() { var txtTyper = document.createElement('textarea'); txtTyper.innerText = 'Type text here'; txtTyper.className = 'txtTyper'; webB.appendChild(txtTyper); txtTyper.style.cursor = 'auto'; let count = 0; var txtTypers = document.querySelectorAll("#txtTyper"); txtTypers.forEach((element, currentIndex) => { count = count + 1; element.classList.add(`Typer-${count}`); }); } const addValue = () => { textbox.value = [...document.querySelectorAll(".txtTyper")] .map(txtTyperw => '<p style="height:' + txtTyperw.offsetHeight + 'px;width:' + txtTyperw.offsetWidth + 'px;">' + txtTyperw.value + '</p>'); requestAnimationFrame(addValue); } addValue(); })(); <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css" rel="stylesheet" /> <div class="btnP"> <button id="addTxt" class="btn btn-primary" title="Add text block"><i class="bi bi-textarea-t fs-4"></i></button> </div> <input style="height:50px;width:100%" id="textbox"> <div class="webB" id="webB"> </div>

javascript html textarea

回答 1 投票 0

如何在 Material-UI 中设置 TextAreaAutoSize 组件的宽度？

我在任何地方都找不到有关如何更改material-ui 中 TextAreaAutosize 组件的默认宽度的任何信息。看来唯一的选择就是拥有这个小盒子。有谁知道更好的...

reactjs material-ui textarea

回答 5 投票 0

如何知道文本区域是否正在主动调整大小

我正在寻找一个 javascript 函数，如果给定的 textarea 元素正在调整大小，则该函数将返回 true，如果没有，则返回 false。这个功能是否存在，不使用JQuery或任何其他...

javascript html static textarea

回答 1 投票 0

在React输入元素中按tab键时如何输入空格的tab大小？

我想在React元素的或<input>中输入空格的制表符大小。但是当按 Tab 键时，焦点离开文本区域或输入，而其他反应元素被指向。我怎样才能...</desc> <question vote="0"> <p>我想在React元素的<pre><code><textarea></code></pre>或<pre><code><input></code></pre>中输入空格的制表符大小。但是当按 Tab 键时，焦点离开文本区域或输入，并且其他反应元素被指向。</p> <p>如何捕获此事件并将焦点保持在文本区域或输入，并将制表符大小的空格添加到当前光标位置？</p> <p>我试图喜欢这个，但没有帮助。</p> <pre><code>const import { useState } from "react"; import ReactDOM from "react-dom/client"; function Car() { const [brand, setBrand] = useState("Ford"); const [description, setDescription] = useState("It's a red color Mustang from 1964"); const setCarBrand = (e) => { if(e.keydown == 'tab') setBrand(brand + ' '); else setBrand(e.target.value); e.preventDefault(); } const setCarDescription = (e) => { if(e.keydown == 'tab') setBrand(brand + ' '); else setDescription(e.target.value); e.preventDefault(); } return ( <> <h1>My {brand}</h1> <p> {description} </p> <br/> <label>{brand}: <label/> <input id="brand" placeholder={brand} value={brand} onChange={setCarBrand} /> <label>{description} : <label/> <textarea id="description" placeholder={description} value={description} onChange={() => setCarDescription()} /> </> ) } const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<Car />); </code></pre> </question> <answer tick="false" vote="0"> <p>您可以在 setCarBrand 和 setCarDescription 函数中添加此代码。</p> <pre><code>if(e.keyCode === 9) { // tab was pressed // get caret position/selection var start = this.selectionStart; var end = this.selectionEnd; var target = e.target; var value = target.value; // set textarea value to: text before caret + tab + text after caret target.value = value.substring(0, start) + "\t" + value.substring(end); // put caret at right position again (add one for the tab) this.selectionStart = this.selectionEnd = start + 1; // prevent the focus lose e.preventDefault(); } </code></pre> </answer> </body></html>

javascript reactjs tabs textarea

回答 0 投票 0

我可以设置文本区域的大小调整抓取器的样式吗？

我的设计师刚刚给了我带有带有样式调整大小抓取器的文本区域的设计。问题是：我可以设计它吗？

css resize textarea

回答 7 投票 0

如何使用tailwindcss将summernote嵌入到asp.net项目中

我正在尝试将 Summernote 嵌入到我的项目中，并且我正在使用 tailwindcss。我按照指南将 SummerNote 安装到项目中，但它仍然不起作用。我将这些行添加到我的 _Layout.c...

javascript asp.net-mvc tailwind-css textarea summernote

回答 1 投票 0

保留文本区域中的换行符

我有一个带有文本区域的表单，我想在输出内容时保留用户输入的换行符。例如，如果我在 textarea 中写入：这里有一句话。这是另一个。她...