时间戳

首页 > 解决方案 > 第一个焦点上的文本区域行为

html - 第一个焦点上的文本区域行为

问题描述

第一次渲染我的网页，然后聚焦在文本区域部分，文本区域空间跳出框架。正如您在屏幕截图中看到的那样，不同浏览器的行为是不同的：

实际演示 实际演示

在 Chrome 上 在 Chrome 上

在火狐上 在火狐上

只有在页面渲染后第一次获得焦点时才会发生这种情况。我发现了一个类似的问题，但无法在那里得到答案，因为它只发生一次，所以我的代码中不应该有 CSS 冲突。

标签： htmlsymfony

解决方案

好的，我在寻找@Joel 要求的 CSS 时发现了一件事，因为该应用程序是在 Symfony 下构建的，并且仅以其概念呈现，Symfony 在第一个焦点上应用了一些 CSS。

我创建的文本区域仅具有与宽度相关的 CSS，并且正在准备为：

<textarea id="create_article_content" name="create_article[content]" class="tinymce"></textarea>

在焦点上，它正在转换为：

<textarea id="create_article_content" name="create_article[content]" class="tinymce" data-gramm="true" data-gramm_editor="true" style="background: transparent none repeat scroll 0% 0% !important; z-index: auto; position: relative; line-height: 24px; font-size: 16px; transition: none 0s ease 0s;"></textarea>

基本上，它添加了position: relative导致这种效果的原因并避免我需要编写的这种行为

textarea:focus { position: sticky!important; }

我不确定这是否应该是正确的答案。

推荐阅读