テキストを変更するためのJavaScriptの修正

Question

私は、ユーザー入力フィールドに基づいてテキストシャドウを変更するJavaScript関数について助けが必要です。 3px 3px 3px redのような完全な値を追加するとうまくいきます。

しかし、私はそれが好きにしようとしています：

Javascriptが自動的3px 3px 3pxを追加します。また、ユーザーはシャドーカラーのみを書き込む必要があります。

ここでは、JavaScript関数です：

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

そして、これは私がobj.valueの前に追加の何かがあるはずだと思う

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

を使用していたHTMLです。 obj.valueは、ユーザーが追加する色になります。

Answer 1

からkeyupイベントと+（文字列の連結演算子を）試してみてください

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

---

ユーザが「Enter」を押したときに実行したい場合。あなたがイベントの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; 

しかし、それは失敗します多くのユーザが魔法の文字列を入力して使用します。間違った入力、test the input for a valid color許可しないように

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

代わりに何度も同じDOM要素を再照会のさらなる改良

• を、それを保存します変数、例えばvar target = document.getElementById('coltext');
• フォールバックを使用する代わりに、ユーザーにメッセージ（if (!testColor(el.value)) { alert('not valid'); }）を提示することもできます。
• testColor関数を使用する代わりに、影が適用されたかどうかをテストし、そうでない場合はエラーメッセージを表示できます。

デモ

Try before buy