...

View Full Version : onFocus change Value?



UrbanTwitch
08-10-2008, 05:30 AM
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?

ninnypants
08-10-2008, 05:47 AM
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.



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);" />

UrbanTwitch
08-10-2008, 07:52 AM
I'm sorry. I don't understand. :\

Philip M
08-10-2008, 12:14 PM
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

barkermn01
08-10-2008, 04:37 PM
Nice and easy

in your Header


<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

IrDewey
08-10-2008, 07:10 PM
Wouldn't onblur work better for this?

ninnypants
08-10-2008, 07:14 PM
They would both work the same because onchange will only take effect once the form element loses focus after being changed.

UrbanTwitch
08-10-2008, 07:25 PM
Ahh ok. So it's like this:


<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? :-)

ninnypants
08-10-2008, 07:32 PM
'bgColor' should be 'background' or 'backgroundColor'

UrbanTwitch
08-10-2008, 07:35 PM
Ah ok like this:


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

ninnypants
08-10-2008, 07:47 PM
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

UrbanTwitch
08-10-2008, 07:49 PM
Where would I put the # at?

IrDewey
08-10-2008, 07:57 PM
Either you would have to type it in before the color, or do something like this:



document.getElementById("MyBox").backgroundColor = "#" + color


However if you do that, inputs like "darkblue" or things of that nature wouldn't work.

UrbanTwitch
08-10-2008, 10:08 PM
Thjis is not working =(



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

ninnypants
08-10-2008, 10:50 PM
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

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

<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

<input type="text" onChange="changeC(this.value);">

UrbanTwitch
08-10-2008, 11:01 PM
Actually you know what I would do to like lets say I put in a color name in an inout box. I click out of it and the following appears like:

<div style='color:$colorname'></div>

You know? When they click out of the box it updates?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum