用于更改文本阴影的 JavaScript 修复答案

【问题标题】：JavaScript fix for change text shadow用于更改文本阴影的 JavaScript 修复
【发布时间】：2017-08-13 11:21:24
【问题描述】：

我需要一些关于我正在使用的 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前面加点东西。因为obj.value 将是用户要添加的颜色。

【问题讨论】：

它只是一个空文本字段。我将 3px 3px 3px green 添加到该字段中，它工作正常。

标签： javascript html css

【解决方案1】：

尝试 keyup 事件和 +（字符串上的 concat 运算符）

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

工作示例https://codepen.io/anon/pen/VpXmWr

如果您希望它在用户按下“回车”时运行。您可以通过访问事件的 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; 
  }
}

工作示例https://codepen.io/anon/pen/BWrQXX

【讨论】：

天啊！这正是我所需要的。非常感谢。唯一缺少的是，当我按下回车键时旧代码运行。这也可能吗？再次感谢。
@Samlano 您可以检查他们是否按下了按键。我在答案中添加了工作示例:)
见鬼！非常感谢。赞成。虽然这很快。

【解决方案2】：

当然，您可以简单地在字符串前面加上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)'
};

要禁止错误输入，test the input for a valid color:

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

进一步改进

不要一次又一次地重新查询同一个 DOM 元素，而是将其存储在一个变量中，例如 var target = document.getElementById('coltext');。
您也可以向用户显示一条消息：if (!testColor(el.value)) { alert('not valid'); }。
您可以不使用testColor 函数，而是测试是否应用了阴影，如果没有，则显示错误消息。

演示

Try before buy

【讨论】：