Question

我需要一些关于我使用的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将是用户将添加的颜色。

Answer 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

如果您希望在用户按＆＃34时运行，请输入＆＃34;。您可以通过访问事件的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

Answer 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

JavaScript修复了更改文本阴影

2 个答案: