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

2 answers

Try keyup event and + (concat operator line by line)


<span id="coltext">This is some text</span>
<br />
<input type="text" id="model" />



var input = document.getElementById('model');
var text = document.getElementById('coltext');

function changeTextShadow(event) {
  var value = input.value;
  var parts = value.split(' '); = '3px 3px 3px ' + value;

input.addEventListener('keyup', changeTextShadow);


Working example

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(' '); = '3px 3px 3px ' + value; 


Working example



Of course, you can just add a line 3px 3px 3px

like: = '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'); = color;
    return ? 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; = 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.


Try before you buy



All Articles