SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Evangelist Tecknowjnkie's Avatar
    Join Date
    Nov 2004
    Location
    Mission Viejo
    Posts
    403
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Using DOM to update field on page when user types a string - running into an issue

    I have a form that when the user types into the field it writes to another text area on the page. This form is being developed for a sign company to accept sign orders online.

    The problem I am running into is that I need to code a function where in upon the backspace key, or delete keys get pressed it actually deletes the text from the preview textarea or backspaces with out adding the box characters for non recognized keys.

    The shift function does not work work wherein the (!) exclamation point and so on do not fire into the text area. I know this requires coding.

    I am sure this requires an if this key + this key are pressed - display this - but not sure (as I am new to JS/DHTML) how to do so.

    Is this a pain in the arss? Previosuly I would update the text field after user edits and the fied looses focus it would append text into preview window but customer wants total dynamicy (is that a word)

    Thank you for replies

  2. #2
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Show us the code you are using.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  3. #3
    SitePoint Evangelist Tecknowjnkie's Avatar
    Join Date
    Nov 2004
    Location
    Mission Viejo
    Posts
    403
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <title></title>
        <script type="text/javascript">	
          
    	  function userInput(e) {
            if (window.event) {
              var key = window.event.keyCode;
            } else {
              var key = e.keyCode;
            }
        var textField = document.getElementById('newText');
    	var text_tn = document.createTextNode(String.fromCharCode(key)); 
    	textField.appendChild(text_tn);   
    	
          }
    
          function addListeners(e) {
            var textarea = document.getElementById('user');
            addEvent(textarea, 'keyup', userInput, false);
          }
    
          addEvent(window, 'load', addListeners, false);
    
          function addEvent(elm, evType, fn, useCapture)
          // cross-browser event handling for IE5+, NS6+ and Mozilla/Gecko
          // By Scott Andrew
          {
            if (elm.addEventListener) {
              elm.addEventListener(evType, fn, useCapture); 
              return true; 
            } else if (elm.attachEvent) {
              var r = elm.attachEvent('on' + evType, fn); 
              return r; 
            } else {
              elm['on' + evType] = fn;
            }
          }
    
        </script>
    	
        <style type="text/css">
    <!--
    newtext {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	color: #CC0000;
    }
    -->
        </style>
    </head>
      <body>
        <form>
          <textarea id="user"></textarea>
        </form>
    	<form>
          <textarea id="newText"></textarea>
        </form>
      </body>
    </html>

  4. #4
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Your indentation is inconsistent.

    Why are you appending text nodes to the textarea instead of just modifying its value property?

    Why did you set the XMLNS attribute of <html> when you're using the HTML 4.01 Strict doctype?

    Your code is not valid HTML 4.01 Strict. textarea is an inline element. Only block-level elements are allowed to be direct children of form elements. You should put the textareas in <div>s or <fieldset>s.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  5. #5
    SitePoint Evangelist Tecknowjnkie's Avatar
    Join Date
    Nov 2004
    Location
    Mission Viejo
    Posts
    403
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Look dude - if you can not offer up friendly helpful advise - why do you respond?
    While your overwelmingly negative response pointed out some flaws it did not answer my question.

    Thanks anyway - you're a pro!

  6. #6
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well indented code is easier to read.

    Will you at least answer my first question? I'm curious as to why you chose to do it that way.

    I don't mean to be unfriendly. I just usually point out odd things and errors in the code that people post.

    One thing that might help would be to use a regexp to filter which characters you were appending to the second textarea.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  7. #7
    SitePoint Wizard stereofrog's Avatar
    Join Date
    Apr 2004
    Location
    germany
    Posts
    4,324
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Tecknowjnkie
    I have a form that when the user types into the field it writes to another text area on the page.
    Code:
    <input onkeyup="document.getElementById('foo').innerHTML=value">
    <textarea id="foo"></textarea>
    That's all about it.

  8. #8
    SitePoint Evangelist Tecknowjnkie's Avatar
    Join Date
    Nov 2004
    Location
    Mission Viejo
    Posts
    403
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you stereofrog

    Will that ensure that when the users hits backs space or ****+3=# it will correspond in the textarea id-foo with the function userInput I have above?

    Thanks again

  9. #9
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It should.

    I would use the textarea's value property instead of its innerHTML property.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  10. #10
    SitePoint Addict
    Join Date
    Nov 2003
    Location
    Malmoe, Sweden
    Posts
    265
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If possible, avoid using innerHTML.

    Is it possible in this case? Yes! Use the value property.

    Off Topic:

    Donīt see anything 'negative' in Kravvitz 'response'. Maybe you take comments on your code to personal? You should rejoice instead.

  11. #11
    SitePoint Evangelist Tecknowjnkie's Avatar
    Join Date
    Nov 2004
    Location
    Mission Viejo
    Posts
    403
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    Thanks all -

    Off Topic:

    Donīt see anything 'negative' in Kravvitz 'response'. Maybe you take comments on your code to personal? You should rejoice instead.
    You know it is ironic; while I was looking over K's comments I thought to myself - he's correct and hence has made me very cognizant of my code structure.

    I didn't take it personally, only that, I used to be very pointed with my clients who did not undertsand technology - thus making them feel stupid while not intending too and I see how I used to be, and it's ugly.

    Thank you Kravvitz - (seriously for your edgy candor - it may not have had the same effect if you were peaches and cream)


Bookmarks

Posting Permissions

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