用于更改文本阴影的JavaScript修复程序

我需要一些关于我正在使用的JavaScript函数的帮助，该函数根据用户输入字段更改文本阴影。 当我添加完整的值，如

3px 3px 3px red

时，它工作正常

但我试着让它像：

Javascript自动添加

3px 3px 3px

。用户只需写入阴影颜色

下面是JavaScript函数：

function changeBackground(obj) {
    document.getElementById("coltext").style.textShadow = obj.value;
}

这就是我正在使用的HTML

<input id="color" type="text" onchange="changeBackground(this);" />
<br /><span id="coltext">CHANGE THE SHADOW OF THIS TEXT</span>

更改此文本的阴影

我认为应该在

obj.value

前面添加一些内容。As

对象值将是用户要添加的颜色。
尝试键控事件和+（字符串上的concat运算符）

HTML

工作示例


如果您希望在用户按“回车”时运行此功能。您可以通过访问事件的keyCode来检查按下的键

function changeTextShadow(event) {
  if ( event.keyCode === 13 ) { //enter's keycode is 13 (ascii code)
    var value = input.value;
    var parts = value.split(' ');
    text.style.textShadow = '3px 3px 3px ' + value; 
  }
}

工作示例
当然，您可以简单地在字符串
3px 3px 3px
前面加上前缀，如下所示：

target.style.textShadow = '3px 3px 3px ' + value;

但是它会因为用户的大量输入而失败，并使用一个神奇的字符串


为了使其更具可配置性，您可以将配置存储在一个对象中：

var config = {
    offsetX: '3px',
    offsetY: '3px',
    blurRadius: '3px',
    color: 'rgba(0, 0, 0, 0.5)'
};

要禁止错误输入，请执行以下操作：

最后更新函数以创建正确的值。如果给出了错误的值，此示例将返回到配置的颜色：

function updateTextShadow(el) {
    var value = config.offsetX + ' ' + config.offsetY + ' ' + config.blurRadius + ' ';

    value += testColor(el.value) ? el.value : config.color;

    target.style.textShadow = value;
}

进一步改进


不要一次又一次地重新查询同一个DOM元素，而是将其存储在变量中，比如
var target=document.getElementById（'coltext'）

除了使用回退，您还可以向用户显示一条消息：
if（！testColor（el.value））{alert（'not valid'）；}
您不必使用
testColor
函数，而是可以测试阴影是否已应用，如果未应用，则显示错误消息

演示

它只是一个空文本字段。我将3px3px3pxgreen添加到字段中，效果很好。天哪！这正是我需要的。谢谢。唯一缺少的是，旧代码在我按enter键时运行。这也可能吗？再次感谢。@Samlano你可以检查他们是否按下了键。我在答案中添加了工作示例：）该死的，是的！！谢谢。向上投票。虽然这很快。
var config = {
    offsetX: '3px',
    offsetY: '3px',
    blurRadius: '3px',
    color: 'rgba(0, 0, 0, 0.5)'
};

function testColor(color) {
    var el = document.createElement('div');
    el.style.backgroundColor = color;
    return el.style.backgroundColor ? true : false;
}

function updateTextShadow(el) {
    var value = config.offsetX + ' ' + config.offsetY + ' ' + config.blurRadius + ' ';

    value += testColor(el.value) ? el.value : config.color;

    target.style.textShadow = value;
}