Simple Textbox assitance - CSS-Tricks

This topic is empty.

Viewing 15 posts - 1 through 15 (of 19 total)

1 2 →

Author

Posts
July 23, 2014 at 6:52 pm #176269

Rustatic
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. :)

July 23, 2014 at 10:50 pm #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?

July 24, 2014 at 6:10 am #176320

Rustatic
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.

July 24, 2014 at 9:06 pm #176377

Rustatic
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. :)

July 24, 2014 at 9:55 pm #176381

nixnerd
Participant

You want the text to disappear or the input box?

July 25, 2014 at 3:10 am #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.

July 25, 2014 at 7:53 am #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.

July 25, 2014 at 10:00 am #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.

July 25, 2014 at 12:56 pm #176482

Rustatic
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.

July 28, 2014 at 6:04 am #176674

Rustatic
Participant

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

July 30, 2014 at 6:10 am #176908

Rustatic
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! :)

July 30, 2014 at 6:30 am #176912
Rustatic
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>
July 30, 2014 at 6:33 am #176913

Rustatic
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

July 30, 2014 at 6:58 am #176917

Rustatic
Participant

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

July 30, 2014 at 7:05 am #176919

Rustatic
Participant

Here’s the entire code.

http://pastebin.com/bA2T0SwY

Again, thanks for all your help.
Author

Posts

Viewing 15 posts - 1 through 15 (of 19 total)

1 2 →

The forum ‘JavaScript’ is closed to new topics and replies.