Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    Regular Coder
    Join Date
    Jan 2008
    Posts
    334
    Thanks
    9
    Thanked 0 Times in 0 Posts

    write what you are typing in a input out on the screen

    Hey, I'm not to sure where I can find this script or how it would be made.. I need a script that will write out whatever someone is typing inside of a input field onto the page in real time.. How would this be done?

    I also need to find a script that I can use for a link that will pop up another window and I want javascript to fix the size window to a size that I set and disable everything like the tool bar back space and so on. The address bar can stay. I just need a like a little pop up window.

    If anyone has any ideas on where I can find these script. Please let me know.


    Thanks,
    Jon W

  • #2
    Regular Coder
    Join Date
    Jan 2008
    Posts
    334
    Thanks
    9
    Thanked 0 Times in 0 Posts
    anyone?

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,596
    Thanks
    80
    Thanked 4,630 Times in 4,593 Posts
    I'm sorry, I'm lost.

    If you just do
    Code:
    <form>
    <input size=30>
    </form>
    Then what is typed *IS* displayed on the screen.

    Do you mean somewhere *ELSE* on the screen??? (If so, why??) What about if the user uses the mouse to copy/paste a block of text into the field? Do you want that to appear? Or if the user uses the mouse to erase everything typed so far. Or or or...

    As for the window:
    Code:
    <script>
    window.open('','POPUP','width=300,height=200');
    </script>

  • #4
    Regular Coder
    Join Date
    Jan 2008
    Posts
    334
    Thanks
    9
    Thanked 0 Times in 0 Posts
    I've figured out the pop up window with Java Script work. I just want to know how to have text that is typed inside of the input field display on the screen in real time.

    So say I typed something like this:


    input: this is the text that I typed in the input field

    And as I type it would show the text being typed in real time on the screen on the page.

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,596
    Thanks
    80
    Thanked 4,630 Times in 4,593 Posts
    I am really and truly lost.

    I ask again, what is wrong with simply:
    <form>
    <input size=30>
    </form>
    ???

    If you don't want it to *LOOK* like an input box, then just give it a style that removes the box.
    Code:
    <form>
    <input style="border: none; background-color: transparent; width: 600px;">
    </form>
    Now, wherever you plunk that on the screen, they typing into it is of course displayed.

    If you need multiple lines, just use a <textarea> in the same way, same kind of style.

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,596
    Thanks
    80
    Thanked 4,630 Times in 4,593 Posts
    Here, try this HTML page:
    Code:
    <html><body onload="document.forms[0].here.focus();">
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <form onsubmit="return false;">
    <input name=here style="cursor: hand; border: none; background-color: transparent; font-size: xx-large; width: 100%;">
    </form>
    </body></html>
    As soon as the page appears, just start typing something. No?

  • #7
    Regular Coder
    Join Date
    Jan 2008
    Posts
    334
    Thanks
    9
    Thanked 0 Times in 0 Posts
    Well, its going to be used for a chat box. Since the input field is not very big and I don't really want to put it inside of a textarea. I thought it would be cool to have the text appear on the bottom and you can see exactly what your typing inside of the input field.

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,596
    Thanks
    80
    Thanked 4,630 Times in 4,593 Posts
    Okay...see that is different.

    Now a question: How will you "chop off" text from the top of the chat box when the total text gets too long for it???

    I assume that what you want to have happen is that other people's messages appear in one color and the current user's in a different color, or something like that?

    What happens if the current user is in the middle of a sentence and a new message from another user comes in. Does the other user's message get inserted *before* the text from the current user? Surely it doesn't get mixed in with the current user???

    I think you are going to be surprised at how complex this is really going to get to be. For example, if you want to start tossing really old text away, you have to make sure that it is not still visible on the screen. A *GOOD* chat app needs a coherent approach.

    Fundamentally, without all the bells and whistles, what I'd do:

    (1) Create a buffer the holds all messages from other users and all COMPLETED messages from the current user.
    (2) When the current user types into the tiny text box, you append that stuff to the end of the buffer as you copy the whole mess into your display area.

    This ensures that if a message from another user comes in, it is put at the end of the buffer and thus "shoves down" what the current user is typing.

    Make sense?

    As for how to do this: To take care of copy/paste and backspace and cursor movement and all that crap is HORRIBLY complex if you do it based on keystrokes. So the way I do it is every quarter of a second or so I update the display based on the buffer contents and the text box contents. And that's easy:

    Code:
    <script>
    var buffer = ""; // messages from other users are added to this buffer
    
    var updateDisplay( )
    {
        document.getElementById("chat").innerHTML = 
            buffer + "<br/>\n" + document.getElementById("userEntry").value;
        setTimeout( "updateDisplay( )", 250 );
    }
    </script>
    ...
    <body onload="updateDisplay( )">
    <div id="chat" style="height: 400px; width: 200px; overflow-x: wrap; overflow-y: scroll;"></div>
    ...
    <form>
    <input id="userEntry" size=40>
    </form>
    ...
    </bofy>

  • #9
    Regular Coder
    Join Date
    Jan 2008
    Posts
    334
    Thanks
    9
    Thanked 0 Times in 0 Posts
    Okay, maybe you don't understand me... I never want it to insert into the chat into they hit submit. It would be like simply seeing your text that you have entered into the input field be shown out of the input field below it that way if the person types a long message he can see the whole thing without having to scroll the inputed text until he see what all he has typed in.


    So like I said, it'd never be inserted into the chat until he hit enter.


    So say that the this is the input.

    <input name="chat" type="text value="This is my message that I'm typing into the input field" />

    And while you are typing the message you'd be seeing the text on the page in real time as you type it. But no inserting is done until the person hits enter.

  • #10
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,596
    Thanks
    80
    Thanked 4,630 Times in 4,593 Posts
    You can do that. But why?

    Just use
    <TEXTAREA name="chat" rows="10" cols="40"></TEXTAREA>

    The number of rows and columns is up to you.

    On top of that, if the user really *does* type in more than the area will hold, it will automatically scroll vertically.

  • #11
    Regular Coder
    Join Date
    Jan 2008
    Posts
    334
    Thanks
    9
    Thanked 0 Times in 0 Posts
    To be honest I really just wanted it for the effected. lol

  • #12
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,596
    Thanks
    80
    Thanked 4,630 Times in 4,593 Posts
    Well, the code I gave you before would work, by just omitting the buffer part.
    Code:
    <script>
    function updateDisplay( )
    {
        document.getElementById("typing").innerHTML = 
                 document.getElementById("userEntry").value;
        setTimeout( "updateDisplay( )", 250 );
    }
    </script>
    <body onload="updateDisplay( )">
    <div id="typing" style="height: 80px; width: 300px; overflow-x: wrap; overflow-y: scroll; line-height: 20px;"></div>
    <form>
    <input id="userEntry" size=8>
    </form>
    height of the div needs to be integer multiple of line-height.

    Hmmm...that doesn't auto-scroll to the bottom of the text if it overflows...ehhh...that could be handled, too, with only a bit more work, if it's important.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •