JavaScript fix for changing text shadow
I need help regarding a JavaScript function being used that changes the shadow of a text based on a user input field. It works great when I add the full value, eg 3px 3px 3px red
.
But I'm trying to do this:
Javascript automatically adds
3px 3px 3px
. And the user only has to write the shadow color.
Here is the JavaScript function:
function changeBackground(obj) {
document.getElementById("coltext").style.textShadow = obj.value;
}
And this is the HTML I am using
<input id="color" type="text" onchange="changeBackground(this);" />
<br /><span id="coltext">CHANGE THE SHADOW OF THIS TEXT</span>
I think there obj.value
must be something added before . Because it obj.value
will be the color that the user will add.
source to share
Try keyup event and + (concat operator line by line)
Html
<span id="coltext">This is some text</span>
<br />
<input type="text" id="model" />
Javascript
var input = document.getElementById('model');
var text = document.getElementById('coltext');
function changeTextShadow(event) {
var value = input.value;
var parts = value.split(' ');
text.style.textShadow = '3px 3px 3px ' + value;
}
input.addEventListener('keyup', changeTextShadow);
Working example https://codepen.io/anon/pen/VpXmWr
If you want this to run when the user hits "enter". you can check the key pressed by accessing the keyCode event
function changeTextShadow(event) {
if ( event.keyCode === 13 ) { //enter keycode is 13 (ascii code)
var value = input.value;
var parts = value.split(' ');
text.style.textShadow = '3px 3px 3px ' + value;
}
}
Working example https://codepen.io/anon/pen/BWrQXX
source to share
Of course, you can just add a line 3px 3px 3px
like:
target.style.textShadow = '3px 3px 3px ' + value;
But it will fail for many user inputs and use magic string.
To make it more customizable, you can store the configuration in an object:
var config = {
offsetX: '3px',
offsetY: '3px',
blurRadius: '3px',
color: 'rgba(0, 0, 0, 0.5)'
};
To disallow invalid inputs, check the input for a valid color :
function testColor(color) {
var el = document.createElement('div');
el.style.backgroundColor = color;
return el.style.backgroundColor ? true : false;
}
Finally, update your function to create the correct value. This example rolls back to the customized color if the wrong value is given:
function updateTextShadow(el) {
var value = config.offsetX + ' ' + config.offsetY + ' ' + config.blurRadius + ' ';
value += testColor(el.value) ? el.value : config.color;
target.style.textShadow = value;
}
Further improvements
- Instead of re-requesting the same DOM element over and over, store it in a variable for example
var target = document.getElementById('coltext');
. - Instead of using a backup you can also send a message to:
if (!testColor(el.value)) { alert('not valid'); }
. - Instead of using a function,
testColor
you can check if a shadow has been applied and show an error message if not.
Demo
source to share