HTML 5 - 入力タイプのテキストがリアルタイムでその値を取得する

htmlページの入力要素の値を取得してページ上の段落に印刷する際に特に問題があります。HTML 5 - 入力タイプのテキストがリアルタイムでその値を取得する

コード：

<!doctype html> 
<html> 
    <head> 
    <script> 
     function TakeValue() 
     { 
      var xs = document.getElementById("text").value; 
      var p = document.getElementById("para"); 
      p.textContent = String(xs); 
      document.body.appendChild(p); 
     } 
    </script> 
    </head> 
    <body> 
    <form onsubmit="TakeValue()" method="get" action=""> 
     <input type="submit" name="submit" id="click"> 
     <input type="number" name="value" id="text"> 
    </form> 
    <p id="para">abs</p> 
    </body> 
</html>

私は、段落のテキストの内容が変更された瞬間のために、提出したが、それはその初期値に戻った後に押し

。私は、その段落を提出した後に変更したままにしておきたい。

これはHTMLフォームを使用せずに行うことができますが、実際にはこのようにタスクを実行できるかどうかを確認したいと考えています。

出典

2016-07-30 Iulian Barbu

フォームは、ページがリロードされており、提出されています。 'onsubmit =" TakeValue（）; false false "を返して提出を取り消すことができますが、もしあなたがそれを別の方法で提出しないのであれば、フォームを使うのは意味がありません。ところで、 'xs'には既に文字列が含まれているので、' String（） 'を使う必要はありません。 – nnnnnn

URLにフォームを投稿していない場合は、 'action =" "'を使わず、 'onsubmit'にフックしないでください。代わりに、

あなたの機能にreturn falseかもしれない（と関数呼び出しのことを返します）。これは、の中の関数呼び出しの後でreturn falseを指定するほど明確ではなく、おそらく誰でもコードを維持する方が良いでしょう。

function TakeValue() { 
 
    var xs = document.getElementById("text").value; 
 
    var p = document.getElementById("para"); 
 
    
 
    p.textContent = String(xs); 
 
    document.body.appendChild(p); 
 

 
    // perform FormValidation() 
 
    // perform AJAXExecution() 
 
    
 
    return false; 
 
}

<form onsubmit="return TakeValue()" method="get" action=""> 
 
    <input type="submit" name="submit" id="click"> 
 
    <input type="number" name="value" id="text"> 
 
</form> 
 
<p id="para">abs</p>

出典

2016-07-30 20:53:34 vol7ron

それは私がやろうとしていたことです。どうもありがとうございました！ :) –

は、私が変わっこのcodepen http://codepen.io/anon/pen/oLrqEK

を見てみましょう。

function TakeValue() 
{ 
     var xs = document.getElementById("text").value; 
     var p = document.getElementById("para"); 
     p.textContent = String(xs); 

     // Do you want to add a p or change the text 
     // document.body.appendChild(p); 

     return false; 
    }

そしてこの<form onsubmit="TakeValue(); return false;" >

出典

2016-07-30 20:51:30 surfmuggle

いくつかの解決策を試した後にコードを変更するのを忘れました。どうもありがとうございました！ –

別の段落を追加するか、既存のpのテキストを変更しますか？ – surfmuggle

いいえ、ちょうど段落を変更する、私は提出を押すたびに意味します。 –

HTML 5 - 入力タイプのテキストがリアルタイムでその値を取得する

答えて

関連する問題