使文本框可扩展的用户脚本

Question

我经常使用一个有很多文本框的网站，但愚蠢的是它们不可扩展，因此向它们添加大量文本（我经常这样做）感觉很局促而且更困难比我希望的要多。我想制作一个 greasemonkey script/UserScript 或某种 javascript 我可以粘贴到 Chrome 控制台来更改 HTML/CSS:

的这一部分

resize: none

收件人：

resize: true

这使得文本框底部有小抓手并解决了问题

需要注意的几件事是 1. 该网站似乎是从某种 CMS 动态生成的，以及 2. 我无法更改此 CMS 上的任何内容。另外，我确定有更好的方法来问这个问题..

另一件事是我想要的只是文本区域总是足够大以容纳所有文本，所以如果有一种方法可以自动扩展到文本，那就太好了。此外，在 Whosebug 新 post 文本框上安装 textarea gripper 会很棒！

完整的示例代码在下方 '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>

Answer 1

这是一个基于您的 post 的示例：

const textarea = document.querySelector('#ctl00_ContentPlaceHolderPageContents_ctl00_ctl00_TextArea_CustomDocumentNoteGenerals_PersonPresent');

if (textarea) {               // check if found
  textarea.style.resize = 'both';
}

评论更新

页面上有多个textarea

document.querySelectorAll('textarea').forEach(item => item.style.resize = 'both');

使文本框可扩展的用户脚本

UserScript to Make Textarea Boxes Expandable

html

javascript

css

greasemonkey

userscripts