出力をタイトルケースに変更するために、フォームフィールドの特定の入力をどのようにターゲットに設定しますか？

Question

私のフォームでは、特定の出力フィールドとその文字列をタイトルケースとして出力しようとしています。注目する価値があるかもしれませんが、このフォームは同じページに結果を出力します。私のフォームのFiddle demoがあります。

私は3つの入力カテゴリを持っていますが、この例ではTitle Caseスクリプトを「Name」と「City」出力文字列に実装しようとしていますが、「Words " カテゴリー。進行中の文章をTitle Caseに変換したくないためです。

タイトルケースに変換する方法について多くの議論がありました。hereしかし、私はまだJavaScriptに慣れていないので、これを自分のフォームに実装するのは難しいです。すべての例ではスクリプトを示していますが、フォームに実装する方法は示していません。

私はそうのような特定の入力を試してみて、ターゲットにするGreg Dean'sトップの答えで遊んで...

toTitleCase = function(str) 
{ 
var name = document.getElementById('name'); 
var city = document.getElementById('city'); 

return str.replace(/\w\S*/g, function(txt){return 
txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();}); 
} 

しかし、これは動作していないようですました。ここで

は、HTMLです：

<form> 
<input type="text" class="text" id="name" placeholder="Name"> 
<br> 
<input type="text" class="text" id="city" placeholder="City"> 
<br> 
<textarea type="textarea" id="words" placeholder="Words" cols="70" rows="6"> 
</textarea> 
<br> 
<input type="button" value="Combine" onclick="convert()"> 
<br> 
<div class="wrap"><span id="CharCountLabel1" class="counter"></span> 
<textarea type="textarea" name="output" id="output" cols="70" rows="10" 
maxlength='' placeholder="Output"></textarea> 
</div> 
<br> 
<button type="reset" onclick="ResetForm();" value="Reset 
form">Reset form</button> 
</form> 

、スクリプトの残りの部分：私はちょうど指定された入力フィールドにスクリプトをターゲットにするにはどうすればよい

function convert() { 
var name = document.getElementById("name").value; 
var city = document.getElementById("city").value; 
var words = document.getElementById("words").value; 
//input = wordwrap(input, 70, true); 
var output = ""; 

if(!document.getElementById("name").disabled){ 
output += "Name: " + name + "\n"; 
} 

if(!document.getElementById("city").disabled){ 
output += "City: " + city + "\n"; 
}  

if(!document.getElementById("words").disabled){ 
output += "The words are... " + words + "\n"; 
} 

document.getElementById("output").value = output; 
} 

CharacterCount = function(output,FieldToCount){ 
var myField = document.getElementById(output); 
var myLabel = document.getElementById(FieldToCount); 

var Chars = myField.length; 
if(!Chars){Chars = "" ; }; 

var remainingChars = Chars + myField.value.length 
myLabel.innerHTML = remainingChars+""+Chars 
} 

setInterval(function(){CharacterCount('output','CharCountLabel1')},55); 

？ JQuareyはJavaScriptソリューションだけではありません。

Answer 1

toTitleCase()の機能は完全に機能していますが、実際にはと呼ぶととなります。ページへの出力に行くときあなたがする必要があるすべてはあなたのtoTitleCase機能を通して、あなたのnameとcity変数を実行している：

if (!document.getElementById("name").disabled) { 
    output += "Name: " + toTitleCase(name) + "\n"; 
} 
if (!document.getElementById("city").disabled) { 
    output += "City: " + toTitleCase(city) + "\n"; 
} 

単純にその変数を渡さない、また、形質転換されることからwordsを防ぐために機能：

if (!document.getElementById("words").disabled) { 
    output += "The words are... " + words + "\n"; 
} 

本のワーキングデモがhereを見ることができます。

希望すると便利です。 :)