CODEWITHSUNDEEP
javascriptjqueryhtmlcss
chris97ong
chris97ong

Reputation: 7060

CSS - Hiding text that overlaps with textarea

So I have some HTML code here, which creates a textarea and a nice rectangle with the text 'HTML' at the top-right of the 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>

However, I want to make it such that when the user has a long string of text that obstructs the rectangle, the rectangle becomes hidden. How can I do that? Best if answer is in Javascript / jQuery.

Upvotes: 1

Views: 954

Answers (5)

ElDoRado1239
ElDoRado1239

Reputation: 4048

You can scan the Textarea for newline characters ( '\n' ) and thus get not only the lenght of the whole text, but the length of the first three lines that can collide with the box. So if you make sure the length of the first three lines is not over 45 characters, it will force sort of a padding around the box and only hide it if the user puts text directly under it. You will have to adjust the checked length if you change the size of the Textarea.

Here's a quick example with your html code and a script checking the lines:

http://pastebin.com/MEnDk8bW

Preview

Upvotes: 1

MarsOne
MarsOne

Reputation: 2186

Instead of the hide or show properties, Use toggle...

DEMO

jQuery

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

Upvotes: 0

TheYaXxE
TheYaXxE

Reputation: 4294

You can count the number of characters, and then hide the div when the text is coming close to it, and show it again if the text is deleted:

jQUery:

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

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

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

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

});

NOTE: Also note that you may change the count-number (52) if you are changing the width of the textarea, the font, the font-size or anything else that makes the font different from now.

Demo

Upvotes: 4

Adrian Enriquez
Adrian Enriquez

Reputation: 8413

Here you go.

Fiddle

You can do this by creating this in jquery.

jQuery

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

Upvotes: 0

Green Wizard
Green Wizard

Reputation: 3667

If you are interested in counting the length of the textarea using .length....

use the following... note that the length changes with device width.

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

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

working Fiddle

Upvotes: 0

Related Questions