Fatal编程技术网
  • javascript/
  • Javascript 用于使文本区域框可扩展的用户脚本

Javascript 用于使文本区域框可扩展的用户脚本

javascript html css

Javascript 用于使文本区域框可扩展的用户脚本,javascript,html,css,greasemonkey,userscripts,Javascript,Html,Css,Greasemonkey,Userscripts,我经常使用一个有很多文本区域框的网站，但愚蠢的是它们不可扩展，因此向它们添加大量文本（我经常这样做）感觉非常狭窄，比我希望的更困难。我想制作一个greasemonkey脚本/用户脚本或某种javascript，我可以将其粘贴到Chrome控制台中，以更改HTML/CSS的这一部分： resize: none 致： 这使得textarea框底部有一个小夹子，解决了这个问题 需要注意的几件事是1。这个网站似乎是由某种CMS和2动态生成的。我没有能力更改此CMS上的任何内容。另外，我相信有更好的方

我经常使用一个有很多文本区域框的网站，但愚蠢的是它们不可扩展，因此向它们添加大量文本（我经常这样做）感觉非常狭窄，比我希望的更困难。我想制作一个greasemonkey脚本/用户脚本或某种javascript，我可以将其粘贴到Chrome控制台中，以更改HTML/CSS的这一部分：

resize: none
致：

这使得textarea框底部有一个小夹子，解决了这个问题

需要注意的几件事是1。这个网站似乎是由某种CMS和2动态生成的。我没有能力更改此CMS上的任何内容。另外，我相信有更好的方法来问这个问题

另一件事是，我想要的是文本区域总是足够大，可以容纳所有文本，所以如果有一种方法可以自动扩展到文本，那就太好了。另外，如果在stackoverflow新的post文本框上有textarea夹持器，那就太好了

下面是完整的示例代码，您可以在其中找到“resize:none” 非常感谢

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<tr>
    <td valign="top" class="content_tab_bg_padding" align="left">
        <table cellspacing="0" cellpadding="0" border="0" width="100%">
            <tbody>
                <tr>
                    <td class="height2"></td>
                </tr>

                <tr>
                    <td class="form_label_text" align="left" valign="top">Gotta change this text box to be permanently expandable. Ideally automatically expandable. 
                    </td>
                </tr>
                <tr>
                    <td align="left" valign="top" width="100%" style="padding-top: 2px;">
                        <textarea
                            name="ctl00$ContentPlaceHolderPageContents$ctl00$ctl00$TextArea_CustomDocumentNoteGenerals_PersonPresent"
                            id="ctl00_ContentPlaceHolderPageContents_ctl00_ctl00_TextArea_CustomDocumentNoteGenerals_PersonPresent"
                            class="form_textareaWithoutWidth element" rows="4" style="width: 95%; resize: none;"
                            spellcheck="True" data-preventexpand="PreventExpand" tabindex="0"></textarea>
                    </td>
                </tr>
            </tbody>
        </table>
    </td>
</tr>
</body>
</html>


文件
必须将此文本框更改为永久可扩展。理想情况下可自动扩展。
以下是一个基于您的帖子的示例：

const textarea=document.querySelector（“#ctl00_ContentPlaceHolderPageContents_ctl00_ctl00_textarea_CustomDocumentNoteGenerals_PersonPresent”）；
if（textarea）{//检查是否找到
textarea.style.resize='both'；
}
评论更新

对于页面上的多个
textarea

document.querySelectorAll（'textarea'）.forEach（item=>item.style.resize='both'）；
编程中有很多事情是可能的，但首先要做的是尝试先编写一些代码，然后询问您是否遇到了问题。谢谢，我最后将此代码改为以下代码，以便将其应用于网站，而不是我包含的示例``var textarea=document.querySelectorAll（“textarea”）；if（textarea）{//检查是否找到了（让i=0；i<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <tr> <td valign="top" class="content_tab_bg_padding" align="left"> <table cellspacing="0" cellpadding="0" border="0" width="100%"> <tbody> <tr> <td class="height2"></td> </tr> <tr> <td class="form_label_text" align="left" valign="top">Gotta change this text box to be permanently expandable. Ideally automatically expandable. </td> </tr> <tr> <td align="left" valign="top" width="100%" style="padding-top: 2px;"> <textarea name="ctl00$ContentPlaceHolderPageContents$ctl00$ctl00$TextArea_CustomDocumentNoteGenerals_PersonPresent" id="ctl00_ContentPlaceHolderPageContents_ctl00_ctl00_TextArea_CustomDocumentNoteGenerals_PersonPresent" class="form_textareaWithoutWidth element" rows="4" style="width: 95%; resize: none;" spellcheck="True" data-preventexpand="PreventExpand" tabindex="0"></textarea> </td> </tr> </tbody> </table> </td> </tr> </body> </html>