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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    Regular Coder UrbanTwitch's Avatar
    Join Date
    Apr 2006
    Posts
    485
    Thanks
    44
    Thanked 1 Time in 1 Post

    onFocus change Value?

    Ok so I want to use a live preview using JavaScript.

    What I want is when a user input a color name like red or #FC9442

    when they click out of the input box it changes somewhere else

    preferrably

    <div style='background:IT CHANGES HERE;'></div>

    Get where I am going with this?
    Formerly MysticScript

    6+ years club

  • #2
    Regular Coder ninnypants's Avatar
    Join Date
    Apr 2008
    Location
    Utah
    Posts
    504
    Thanks
    10
    Thanked 47 Times in 47 Posts
    You'll want to use an on change because onfocus will change the value before the user can input anything, but this is what you'll have.

    Code:
    function chngColor(el){
         document.getElementById('element you want to change').backgroundColor = el.value;
    }
    
    // you would use it like this
    <input type="text" onchange="chngColor(this);" />

  • #3
    Regular Coder UrbanTwitch's Avatar
    Join Date
    Apr 2006
    Posts
    485
    Thanks
    44
    Thanked 1 Time in 1 Post
    I'm sorry. I don't understand. :\
    Formerly MysticScript

    6+ years club

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,309
    Thanks
    203
    Thanked 2,563 Times in 2,541 Posts
    Please explain what is it that you do not understand? It seems perfectly clear to me.

    But there is a big problem - what happens when the user types something invalid into the box? Such as #FG9942 or reed or blew. It would be possible but rather cumbersome to validate the entry.


    Quizmaster: In seafood on a restaurant menu, the French word "poisson" translates into English as what?
    Contestant: Chicken

  • #5
    Regular Coder
    Join Date
    Nov 2007
    Location
    Leeds, UK
    Posts
    514
    Thanks
    24
    Thanked 19 Times in 19 Posts
    Nice and easy

    in your Header
    PHP Code:
    <script type="text/javascript">
    function 
    changeC(color)
    {
    // Change "" to the Object you want to style E.G "MyBox"
    document.getElementById("").style.bgColor color;
    }
    </script> 
    in your Text box use
    <input type="text" onChange="ChangeC(this.value);" ect...

    And it will work

  • #6
    New Coder
    Join Date
    Jul 2008
    Posts
    10
    Thanks
    0
    Thanked 1 Time in 1 Post
    Wouldn't onblur work better for this?

  • #7
    Regular Coder ninnypants's Avatar
    Join Date
    Apr 2008
    Location
    Utah
    Posts
    504
    Thanks
    10
    Thanked 47 Times in 47 Posts
    They would both work the same because onchange will only take effect once the form element loses focus after being changed.

  • #8
    Regular Coder UrbanTwitch's Avatar
    Join Date
    Apr 2006
    Posts
    485
    Thanks
    44
    Thanked 1 Time in 1 Post
    Ahh ok. So it's like this:

    Code:
    <script type="text/javascript">
    function changeC(color)
    {
    // Change "" to the Object you want to style E.G "MyBox"
    document.getElementById("MyBox").style.bgColor = color;
    }
    </script>  
    
    
    <input type="text" onChange="ChangeC(this.value);">
    
    <div style='width: 300px; height: 100px;' name='MyBox'></div>
    Right? If not, someone fix? :-)
    Formerly MysticScript

    6+ years club

  • #9
    Regular Coder ninnypants's Avatar
    Join Date
    Apr 2008
    Location
    Utah
    Posts
    504
    Thanks
    10
    Thanked 47 Times in 47 Posts
    'bgColor' should be 'background' or 'backgroundColor'

  • #10
    Regular Coder UrbanTwitch's Avatar
    Join Date
    Apr 2006
    Posts
    485
    Thanks
    44
    Thanked 1 Time in 1 Post
    Ah ok like this:

    Code:
    <script type="text/javascript">
    function changeC(color)
    {
    // Change "" to the Object you want to style E.G "MyBox"
    ocument.getElementById("MyBox").style.backgroundColor = color;
    }
    </script>  
    
    
    <input type="text" onChange="ChangeC(this.value);">
    
    <div style='width: 300px; height: 100px;' name='MyBox'></div>
    But it doesn't work.
    Formerly MysticScript

    6+ years club

  • #11
    Regular Coder ninnypants's Avatar
    Join Date
    Apr 2008
    Location
    Utah
    Posts
    504
    Thanks
    10
    Thanked 47 Times in 47 Posts
    are you also imputing the hash tag (#) because that is required so you can either input it or append it to the the front of the user input

  • #12
    Regular Coder UrbanTwitch's Avatar
    Join Date
    Apr 2006
    Posts
    485
    Thanks
    44
    Thanked 1 Time in 1 Post
    Where would I put the # at?
    Formerly MysticScript

    6+ years club

  • #13
    New Coder
    Join Date
    Jul 2008
    Posts
    10
    Thanks
    0
    Thanked 1 Time in 1 Post
    Either you would have to type it in before the color, or do something like this:

    Code:
    document.getElementById("MyBox").backgroundColor = "#" + color
    However if you do that, inputs like "darkblue" or things of that nature wouldn't work.

  • #14
    Regular Coder UrbanTwitch's Avatar
    Join Date
    Apr 2006
    Posts
    485
    Thanks
    44
    Thanked 1 Time in 1 Post
    Thjis is not working =(

    Code:
    <script type="text/javascript">
    function changeC(color)
    {
    // Change "" to the Object you want to style E.G "MyBox"
    document.getElementById("MyBox").backgroundColor = "#" + color
    }
    </script>  
    
    
    <input type="text" onChange="ChangeC(this.value);">
    
    <div style='width: 300px; height: 100px;' name='MyBox'></div>
    Formerly MysticScript

    6+ years club

  • #15
    Regular Coder ninnypants's Avatar
    Join Date
    Apr 2008
    Location
    Utah
    Posts
    504
    Thanks
    10
    Thanked 47 Times in 47 Posts
    ok you still had a few problems
    If you are going to change something to do with the style of an object you must declare that you are altering the style
    Code:
    function changeC(color){
    // Change "" to the Object you want to style E.G "MyBox"
    document.getElementById("MyBox").style.backgroundColor = "#" + color;
    }
    also to use getElementById you need it to have an id
    Code:
    <div style='width: 300px; height: 100px;' id='MyBox'></div>
    Also when you are using a function it is case sensitive so if you declare the function to be changeC you have to always call it as changeC
    Code:
    <input type="text" onChange="changeC(this.value);">

  • Users who have thanked ninnypants for this post:

    UrbanTwitch (08-11-2008)


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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