www.webdeveloper.com
Results 1 to 10 of 10

Thread: How to display input text in IE

  1. #1
    Join Date
    Aug 2014
    Posts
    3

    How to display input text in IE

    Hello
    I am learning to make a website and I want to display the inputted text next to it input box. It works for Chrome but in IE it won't display. What should I do?

    This is what I have now
    HTML Code:
    <div style="width:5000px;height:100px;border:0px; background-image:url('file://E:/DR Liq website/ccliquidation_files/image604.png'); background-repeat:no-repeat;"> <p class="main">
    &nbsp;&nbsp;Lot XXXX &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;7/14/2014 to 7/18/2014 5:00 pm EST &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>Closed</b>
    </p>
    <p class="main">
    <form oninput="bidbox.value=parseInt(bid.value)">
    Enter/Change Bid:
    <input type="text" name="Fname" id="bid"> <input type="submit" value="Submit"> Your Bid: $<output name="bidbox" for="bid"> </output>
    </form>

  2. #2
    Join Date
    Sep 2008
    Location
    Akron, OH
    Posts
    1,143
    The output tag is not supported in IE. I've been developing sites for 8 years now and I've never even seen that tag!

    http://www.w3schools.com/tags/tag_output.asp

  3. #3
    Join Date
    Aug 2014
    Posts
    3
    I see thank you

    Do you know what I can do to get it to output text that the user enters that works across all the browsers?

  4. #4
    Join Date
    Oct 2013
    Posts
    544
    A bit ugly code-wise but it works:

    Code:
    <form>
    Enter/Change Bid:
    <input type="text" name="Fname" id="bid" oninput="bidbox.innerHTML=this.value"> <input type="submit" value="Submit"> Your Bid: $<span id="bidbox"></span>
    </form>
    Now, if you want to force even dollar amounts this also works, although fractions may be submitted depending on your form handler:

    Code:
    <form>
    Enter/Change Bid:
    <input type="number" name="Fname" id="bid" oninput="bidbox.innerHTML=parseInt(this.value)"> <input type="submit" value="Submit"> Your Bid: $<span id="bidbox">0</span>.00
    </form>
    EDIT:
    Caveat: oninput is a HTML5 form attribute and may not work in IE9-. For sure IE8- is a nogo.
    Last edited by Kevin2; 08-22-2014 at 03:34 PM.

  5. #5
    Join Date
    Sep 2008
    Location
    Akron, OH
    Posts
    1,143
    Change it to a span and modifying your code a little should work. Try this:

    Code:
    <div style="width:5000px;height:100px;border:0px; background-image:url('file://E:/DR Liq website/ccliquidation_files/image604.png'); background-repeat:no-repeat;"> <p class="main">
    &nbsp;&nbsp;Lot XXXX &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;7/14/2014 to 7/18/2014 5:00 pm EST &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>Closed</b>
    </p>
    <p class="main">
    <form oninput="document.getElementById('bidbox').innerHTML=parseInt(document.getElementById('bid').value)">
    Enter/Change Bid:
    <input type="text" name="Fname" id="bid"> <input type="submit" value="Submit"> Your Bid: $<span name="bidbox" id="bidbox"> </span>
    </form>

  6. #6
    Join Date
    Oct 2013
    Posts
    544
    @cbVision: A couple of geniuses we are

  7. #7
    oninput is also too new and unrecognized, so that won't work -- AND it does NOT go on FORM, it goes on the input.

    Though like most onevent attributes it really has no business in the markup and you should be adding the event from the scripting. Which of course is also a laugh since 'oninput' is for the most part redundant to 'onkeypress' ...well, other than the fact it trips when you 'paste' which onkeypress does not.

    Of course, I'm wondering what's with the non-breaking spaces, static style in the markup, lack of labels, gibberish form markup, paragraphs around stuff that doesn't seem to be grammatical paragraphs and why you'd be making an extra copy of what the user is typing in for no good reason...

    Not sure what you're trying to accomplish, but I'm reasonably sure it falls into the "gee ain't it neat" scripting and "doesn't belong on a website in the first place" categories. Like a lot of things HTML 5 and JavaScript...

  8. #8
    Join Date
    Aug 2014
    Posts
    3
    Thank you Kevin2 and cbVision, I will give it a try.

    Deathshadow - I am a student. I wanted to try and make something for a project I am working on.

  9. #9
    Join Date
    Aug 2014
    Posts
    12
    Is this what you're looking for?

    https://angularjs.org/ (Scroll down to 'The Basics')

  10. #10
    By adding <!DOCTYPE html> padding works grand for me in IE8. Take the following code as an example:

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    #myInput {
    padding: 10px;
    }
    </style>
    </head>
    <body>
    <input id="myInput" value="Some text here!" />
    </body>
    </html>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles