英文:
is it possible to make textarea scrollHeight decrease less than 3 row
问题
以下是您提供的代码的翻译：
我对CSS和HTML是个新手。我正在使用textarea来让用户输入多行内容，这是我制作以显示我面临的问题的最小代码：import React, { useState } from "react";const App: React.FC = () => {const [promptLines, setPromptLines] = useState<number>(1);const handleChange = (e: any) => {const inputContent = e.target.value;if (inputContent && inputContent.length > 0) {const talkInput = document.getElementById("talkInput");if(!talkInput) return;const lineHeight = parseInt(window.getComputedStyle(talkInput).getPropertyValue('line-height'));talkInput.style.cssText = 'line-height: 23px;';const scrlht = talkInput.scrollHeight;const lines = Math.floor(scrlht / lineHeight);console.log(lines);}}return (<div className="outerdiv"><textareaid="talkInput"rows={promptLines ? promptLines : 1}onChange={handleChange}></textarea></div>);}export default App;
这是`App.css`的CSS文件内容：.outerdiv{display: flex;align-items: center;padding: 10px;border-radius: 25px;border: 2px solid #ccc;transition: border-color 0.5s ease;width: 80%;margin: auto;margin-bottom: 15px;margin-top: 10px;box-sizing: border-box;min-height: 40px;}.outerdiv textarea{flex: 1;border: none;border-radius: 25px;outline: none;font-size: 16px;font-family: sans-serif;resize: none;padding: 6px;min-height: 23px;line-height: 23px;height: 1rem;}
当我在textarea中输入内容时，行数会增加；当我从textarea中删除内容时，行数会减少。一切都按预期工作，但最小行数是3。它不会减少到少于3行。为什么scrollHeight在3行高度时停止减少？是否可能使scrollHeight继续减少直到1行？
英文:
I am a newbie with the css and html. I am using textarea to make user input multi line content, this is the minimal code I have made to show the issue I am facing, the App.tsx code look like this:
import React, { useState } from "react";const App: React.FC = () => {const [promptLines, setPromptLines] = useState<number>(1);const handleChange = (e: any) => {const inputContent = e.target.value;if (inputContent && inputContent.length > 0) {const talkInput = document.getElementById("talkInput");if(!talkInput) return;const lineHeight = parseInt(window.getComputedStyle(talkInput).getPropertyValue('line-height'));talkInput.style.cssText = 'line-height: 23px;';const scrlht = talkInput.scrollHeight;const lines = Math.floor(scrlht / lineHeight);console.log(lines);}}return (<div className="outerdiv"><textareaid="talkInput"rows={promptLines ? promptLines : 1}onChange={handleChange}></textarea></div>);}export default App;
and this is the App.css css file look like:
.outerdiv{display: flex;align-items: center;padding: 10px;border-radius: 25px;border: 2px solid #ccc;transition: border-color 0.5s ease;width: 80%;margin: auto;margin-bottom: 15px;margin-top: 10px;box-sizing: border-box;min-height: 40px;}.outerdiv textarea{flex: 1;border: none;border-radius: 25px;outline: none;font-size: 16px;font-family: sans-serif;resize: none;padding: 6px;min-height: 23px;line-height: 23px;height: 1rem;}
when I input the content into textarea, the lines will increase, when I delete the contnet from textarea, the lines will decrease, all things work as expect, but the minimal lines are 3. It will not decrease less than 3 rows. why scrollHeight stop decrease in 3 rows height? is it possible to make the scrollHeight continue decrease until to 1 row?
答案1
得分: 1
这是一个示例，使用 div 替代 textarea 并使用 contentEditable="true"。这符合您的需求吗？
<!-- begin snippet: js hide: false console: true babel: false --><!-- language: lang-css -->.my-div {width: 200px;border: 1px solid black;min-height: 20px;max-height: 100px;overflow-y: auto;}<!-- language: lang-html --><div contentEditable="true" class="my-div"></div><!-- end snippet -->
如果需要进一步的信息或帮助，请告诉我。
英文:
Here is an example using div instead of textarea with contentEditable="true". Is that what you need?
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.my-div {width: 200px;border:1px solid black;min-height: 20px;max-height:100px;overflow-y: auto}
<!-- language: lang-html -->
<div contentEditable="true" class="my-div"></div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论