CSS - 隐藏与 textarea 重叠的文本答案

【问题标题】：CSS - Hiding text that overlaps with textareaCSS - 隐藏与 textarea 重叠的文本
【发布时间】：2014-02-06 08:18:23
【问题描述】：

所以我在这里有一些 HTML 代码，它创建了一个 textarea 和一个漂亮的矩形，在 textarea 的右上角带有文本“HTML”。 Fiddle。

<div id="html_text"><h5 style="
margin-top: 17px;
margin-left: 400px;
position: fixed;
color: black;
z-index: 1;
font-family: Arial, Helvetica, sans-serif;
border-style: solid;
border-width: thin;
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
padding-bottom: 3px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;">HTML</h5></div>

<textarea rows="20" style="
margin-left: 20px;
font-family: 'Courier New', Courier, monospace;
height: 280px;
width: 460px;
resize: none;
overflow: scroll;
overflow-x: hidden;
position: absolute;
z-index: 0;" id="html_code" spellcheck="false"></textarea>

但是，我想让它这样当用户有一长串阻碍矩形的文本时，矩形就会被隐藏。我怎样才能做到这一点？最好的答案是 Javascript / jQuery。

【问题讨论】：

你为什么不把它放在文本的顶部（有点透明），当你将鼠标悬停在文本框上时它就会消失。基本上就像在 Jsfiddle 中一样。还有为什么所有的样式都是内联的？
@Ruddy 即使在文本框悬停/聚焦时它消失了，当用户的鼠标从文本框移开或文本框模糊时，矩形仍然会被文本遮挡。而且我不太擅长 CSS :D
你可以数单词，如果超过限制，你可以隐藏内部div。（不适用于响应式设计）
@chris97ong 我看不到检测文本是否位于框下方的方法。它必须以不同的方式完成。也许当用户点击文本框时消失了，如果那里有文本它不会回来，否则它会。

标签： javascript jquery html css

【解决方案1】：

你可以统计字符数，当文字接近时隐藏div，如果文字被删除则再次显示：

jQUery：

$('#html_code').keyup(function () {

  var count = $(this).val().length;

    if(count > 52) {
        $('#html_text').hide();
    }

    else {
        $('#html_text').show();
    }

});

注意：另外请注意，如果您要更改文本区域的宽度、字体、字体大小或其他任何使字体与现在不同的东西。

Demo

【讨论】：

【解决方案2】：

您可以扫描 Textarea 中的换行符 ( '\n' )，从而不仅可以获得整个文本的长度，还可以获得前三行可能与框碰撞的长度。因此，如果您确保前三行的长度不超过 45 个字符，它将强制在框周围进行某种填充，并且仅当用户将文本直接放在其下方时才将其隐藏。如果更改 Textarea 的大小，则必须调整检查的长度。

这是一个简单的示例，其中包含您的 html 代码和检查行的脚本：

http://pastebin.com/MEnDk8bW

【讨论】：

【解决方案3】：

如果您有兴趣使用.length 计算textarea 中的length...。

使用以下...注意长度随设备宽度而变化。

$('textarea').keydown(function(){

    if($(this).val().length > 100){
        $('h5').hide();
    }
})

工作Fiddle

【讨论】：

【解决方案4】：

给你。

Fiddle

您可以通过在 jquery 中创建它来做到这一点。

jQuery

$('body').on('focus keypress', '#text-input', function (e) {
    
    var myLength = $("#text-input").val().length;
    if (myLength >= 40) {
        $("#html_text").hide();
    }
});

【讨论】：

【解决方案5】：

使用切换属性而不是隐藏或显示属性...

DEMO

jQuery

$('#html_code').keyup(function () {
    var count = $(this).val().length;
    if (count > 52) $('#html_text').toggle();
});

【讨论】：