JavaScriptで大文字用のボタンを作成する方法は？

すべてのフォームテキストの入力を大文字に変更するために、最後にボタンをクリックする必要があるように、このスクリプトを変更するにはどうすればよいですか？私はonclick機能を使用する必要があることを知っていますが、どこにどのように入力するのか分かりません。JavaScriptで大文字用のボタンを作成する方法は？

<html> 
    <head> 
    <title>Information Form</title> 
     <style> 
     input[type=text] { 
      text-transform: capitalize; 
      } 
     </style> 
    </head> 
    <body> 
     <input type="text" name="nameInput" /> 
     Type your street address here: 
     <input type="text" address="addressInput" /> 

     Type your city and state here: 
     <input type="text" cityandstate="stateInput" /> 
    </body> 
</html>

出典

2017-03-13 Anonymous

私には、JavaScript/HTMLのチュートリアルを見つけることをお勧めします。現在持っていない有効なHTMLについてさらに理解するのに役立ちます。 –

'最後にユーザーがボタンをクリックする必要があります。これを説明してください。 –

本文の末尾または外部の.jsファイルにスクリプトタグが追加され、htmlファイルにインポートされます。 – Monicka

このような何かが働くだろう：

<html> 
    <head> 
    <title>Information Form</title> 
     <style> 
     input[type=text] { 
      text-transform: capitalize; 
      } 
     </style> 
    </head> 
    <body> 
     <input type="text" name="nameInput" /> 
     Type your street address here: 
     <input type="text" address="addressInput" /> 

     Type your city and state here: 
     <input type="text" cityandstate="stateInput" /> 

     <div> 
    <button id="clickme" onclick="capInputs();">Capitalize Inputs</button> 
     </div> 

     <script> 
     function capInputs() { 
       var elements = document.querySelectorAll("input[type=text]") 
       for (var i = 0, element; element = elements[i++];) { 
        element.value = (element.value).toUpperCase(); 
       } 
     } 
     </script> 
    </body> 
</html>

出典

2017-03-13 18:03:33 Marc

これを参照してください：D

document.getElementById("myBtn").addEventListener("click", displayDate); 
 

 
function displayDate() { 
 
    var x = document.getElementById("myBtn").innerHTML; 
 
    document.getElementById("myBtn").innerHTML =x.toUpperCase() ; 
 
}

<html> 
 
<body> 
 

 
<p>This example uses the addEventListener() method to attach a click event to a button.</p> 
 

 
<button id="myBtn">Try it</button> 
 

 

 

 

 

 
</body> 
 
</html>

出典

2017-03-13 18:06:30

あなたは、ボタンをクリックし、ユーザーを強制する必要はありません。テキストを大文字に変更します。これをJavaScriptを使用して自動的に行うことができます。

CSSを使用して入力のvalueを大文字に変更しないで、画面の外観を変更するだけであることが分かったようです（私のブラウザでは、text-transformはinput要素）。代わりに、あなただけの終了</body>タグの前に挿入する必要があります<script>...</script>タグ内（（入力テキストが編集されるたびに発射される）あなたのinputイベントにイベントリスナーを添付しなければならない。

document.querySelectorAll('input').forEach(function(e) { 
 
    if (e.type === 'text') { 
 
    e.addEventListener('input', valueToUpperCase) 
 
    } 
 
}) 
 

 
function valueToUpperCase(e) { 
 
    (e = e.target).value = e.value.toUpperCase() 
 
}

<label> 
 
    Type your name here: 
 
    <input type="text" name="nameInput" /> 
 
</label> 
 
<br/> 
 
<label> 
 
    Type your street address here: 
 
    <input type="text" name="addressInput" /> 
 
</label> 
 
<br/> 
 
<label> 
 
    Type your city and state here: 
 
    <input type="text" name="stateInput" /> 
 
    </label>

出典

2017-03-13 18:14:15 gyre

ユーザがボタンを押すと入力テキストを大文字にしたいと思っています。すべてのテキストを大文字に変更したい場合（最初のものだけでなくすべての大文字）大文字を大文字にする代わりにCSSで使用する必要があります。

@Amber Ollis、あなたのコードは、最初からすべての入力テキストエレメントにcapitalizeのCSSルールを適用します。このルールは、一度ボタンを押すだけで適用する必要があります（あなたのコードにそのようなボタンが追加されています）。

、以下を参照してくださいコード（作業）：

<html> 
    <head> 
    <title>Information Form</title> 
     <style> 
     .capitalized { 
      text-transform: capitalize; 
      } 
     </style> 
     <script> 
    function capitalize() { 
     var inputs = document.querySelectorAll("input[type=text]"); 
     for (i in inputs) { 
      inputs[i].className = "capitalized"; 
     } 
    } 
     </script> 

    </head> 
    <body> 
     <input type="text" name="nameInput" /> 
     Type your street address here: 
     <input type="text" address="addressInput" /> 

     Type your city and state here: 
     <input type="text" cityandstate="stateInput" /> 

     <input type="button" onclick="capitalize();" value="Capitalize all" /> 

    </body> 
</html>

出典

2017-03-13 18:16:11 airos

JavaScriptで大文字用のボタンを作成する方法は？

答えて

関連する問題