CSS - 隐藏与textarea重叠的文本

Question

所以我在这里有一些HTML代码，它创建了一个textarea和一个漂亮的矩形，文本'HTML'位于textarea的右上角。 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中最好。

Answer 1

您可以计算字符数，然后在文本接近时隐藏div，如果文本被删除则再次显示：

<强> JQUERY ：

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

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

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

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

});

注意：另请注意，如果要更改textarea的宽度，字体，字体大小或更改，则可以更改count-number （52）其他任何使字体与现在不同的东西。

Demo

Answer 2

您可以扫描Textarea中的换行符（'\ n'），从而不仅可以获得整个文本的长度，还可以获得可以与该框冲突的前三行的长度。 因此，如果你确保前三行的长度不超过45个字符，它将强制在盒子周围填充一个填充，只有当用户将文本直接放在它下面时才隐藏它。 如果更改Textarea的大小，则必须调整选中的长度。

这是一个使用html代码和脚本检查行的快速示例：

http://pastebin.com/MEnDk8bW

Answer 3

如果您有兴趣使用length来计算textarea的{​​{1}} ....

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

.length

工作Fiddle

Answer 4

你走了。

Fiddle

你可以在jquery中创建它。

<强>的jQuery

$('body').on('focus keypress', '#text-input', function (e) {

    var myLength = $("#text-input").val().length;
    if (myLength >= 40) {
        $("#html_text").hide();
    }
});

Answer 5

使用切换...

代替隐藏或显示属性

DEMO

的jQuery

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