Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Simple Textbox assitance

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 19 total)
  • Author
    Posts
  • #176269
    1595465132
    Participant

    Hello, This is my first post on these forums so all apologies if there are any forum rules I’ve violated with the title or whatnot.

    Regardless, I want a textbox that is one line thick that can be typed into, and after a few seconds of nobody typing, the text disappear. The Disappear time should take about 3 seconds, and I’d say 5 seconds of idle time before it begins to disappear.

    If anyone is knowledgeable of how to make something like that, please help me out!

    Thanks all. :)

    #176272
    Paulie_D
    Member

    You would need Javascript to do this but it’s not clear what you are trying to do and,more importantly, WHY.

    What is the purpose of this effect?

    Should the text be removed completely or just made invisible?

    #176320
    1595465132
    Participant

    I’m honestly not very familiar with the code necessary to do so, and It’s for a project I’m working on for a friend who’s kind of got some depression issues.

    When nothing has been typed in the text box after five seconds I would like the text to fade to white then be removed completely.

    #176377
    1595465132
    Participant

    I could really use the help. A textbox that maybe looks like it’s made with CSS (I can handle that portion), but when text is entered it slowly vanishes until it is completely deleted after about 5 seconds of non-typing.

    Thank you, kind sir. :)

    #176381
    nixnerd
    Participant

    You want the text to disappear or the input box?

    #176409
    Paulie_D
    Member

    Still trying to figure out a use case for this effect.

    I’d be pretty annoyed if text I’d just entered into an text box disappeared just because I paused for a few seconds in the middle especially (and you haven’t made this clear yet) if the text I’d just entered had been removed and was unrecoverable.

    What if I’ve finished typing…how would the box know whether I’d finished or was just pausing in the middle?

    It’s poor all round from a UX point of view and impractical anyway.

    #176444
    Paulie_D
    Member

    It’s certainly possible to detect a keyup with JQuery so you could fire a delayed function on everykeyup…stopping the function onkeydown.

    http://api.jquery.com/keyup/
    http://api.jquery.com/keydown/

    Basically, just using these two you could certainly write a function to clear the textarea after a specified period.

    Might be a bit memory intensive though.

    It’s beyond my ‘cut and paste’ level with JQ although it might be interesting.

    You would have to assume that, barring any other interaction (such as a click on a ‘keep’ button or something), ALL text would be deleted once the function runs it’s course.

    #176466
    JacobPeters
    Participant

    This is actually giving me some art ideas.

    All this requires is a keyup event that cancels a timeout function if it’s already set and then sets a new one. Exactly the same as a registration form that checks if a username/email is in use through an XMLHttpRequest.

    #176482
    1595465132
    Participant

    Most certainly! Thank you all for the support in figuring this out. Yes, I can definitely wait 2 days. You are all right on the dot. I can’t thank you enough.

    #176674
    1595465132
    Participant

    It works fine, I love it and I cannot thank you enough for the help. Have a great day. :D

    #176908
    1595465132
    Participant

    Actually, now I’m having a problem. I’m trying to implement this into my website, and I’ve tried numerous ways (<script type=”text/css”>, <script type=”text/javascript”>, and even linking it. I’m also not sure how to apply Jquery to make sure everything runs properly, if that’s even necessary. Maybe just do a rough HTML example of what I would need to do? All is appreciated man, thanks! :)

    #176912
    1595465132
    Participant

    Alright, so I’ve got JQuery importing first, now I’ve got your code written as such:
    <html>
    <head>
    <script src=”jquery-1.11.1.min.js”></script>
    <form>
    <input type=”text” id=”textfield” />
    </form>
    <script src=”//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js”></script>
    <script>window.jQuery || document.write(‘<script src=”js/jquery-1.7.2.min.js”><\/script>’)</script>
    <script type=”text/css”>
    .fade-out {
    transition: color 3s ease-in-out;
    color: rgba(255,255,255,0); //transparent black
    }
    </script>
    <script type=”text/javascript>
    window.onload = function(){
    var textfieldTimer;

    $("#textfield").keyup( function(){
        clearTimeout(textfieldTimer);
        var field = $(this);
        textfieldTimer = setTimeout(function(){
            field.addClass('fade-out');
            textfieldTimer = setTimeout(function(){
                field.val('');
                console.log(field);
            }, 3000         
            );
        }, 5000);
    });
    
    $("#textfield").keydown(function(){
        clearTimeout(textfieldTimer);
        $(this).removeClass('fade-out');
    
    });
    

    };
    </script>

    </head>
    </html>

    #176913
    1595465132
    Participant

    Alright, I’ve got everything set up, now my only problem is that I’m not sure on whether or not I’ve written the format correctly.

    Here’s what I’ve got.
    http://pastebin.com/c4jDviue

    #176917
    1595465132
    Participant

    I’m using the “http://ajax.googleapis.com/ajax/libs/jquery&#8221; script src now, although the text isn’t vanishing. I haven’t edited the script at all after you “OK”d it. Any ideas?

    #176919
    1595465132
    Participant

    Here’s the entire code.

    http://pastebin.com/bA2T0SwY

    Again, thanks for all your help.

Viewing 15 posts - 1 through 15 (of 19 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.