このスクリプトをjQueryでリアルタイムに作成したいのですが、どうすればいいですか？

私は現在Javascriptを学んでおり、私は誰かができる最も基本的なレベルにいます。このスクリプトをjQueryでリアルタイムに作成したいのですが、どうすればいいですか？

私はenvato市場向けの紹介リンクを生成するための簡単なスクリプトを書いています。

プロファイルURLとユーザー名を取得する非常に単純な関数とonclickは、これらの変数を結合し、そこに？ref =を入れるために使用されます。

<!DOCTYPE HTML> 
 
<html> 
 
\t <head> 
 
\t \t <title>JS</title> 
 
\t </head> 
 
\t <body> 
 
\t \t <script> 
 
\t \t \t function refferalGen() { 
 
\t \t \t \t var userName = document.getElementById("username").value; 
 
\t \t \t \t var profUrl = document.getElementById("profurl").value; 
 
\t \t \t \t var result = (profUrl) + "?ref=" + (userName); 
 

 
\t \t \t \t document.getElementById("resulttxt").value = result; 
 
\t \t \t } 
 
\t \t </script> 
 

 
\t \t <input style="width:250px" type="text" id="username" placeholder="Username" /><br> 
 
\t \t <input style="width:250px" type="text" id="profurl" placeholder="Profile Url" /><br> 
 
\t \t <input style="width:250px" type="text" id="resulttxt" placeholder="Result Will be printed here" /><br> 
 
\t \t <input style="width:250px" type="button" name="clickbait" onclick="refferalGen()" value="Clickbait !" /> 
 

 
\t </body> 
 
</html>

は、私はそれが私はそれがリアルタイムである代わりに、結果を取得するためにボタンを使用するために持っていけないようにしたいです。

ユーザ名のテキストフィールドに入力すると、自動的に結果フィールドが自動的に更新され、同じことがプロファイルのURLフィールドにも適用されます。

返信いただきありがとうございます。ユーザーがこのようなキーを押して機能を呼び出したい任意の入力に

出典

2016-06-20 Demoncious

私は答えを投稿する前に質問があります。これらの入力からキャプチャされている任意の形式でサーバーにデータを送信または送信していますか？ –

[HTML5プレースホルダ属性は、ラベル要素の代わりではありません]（http://www.456bereastreet.com/archive/201204/the_html5_placeholder_attribute_is_not_a_substitute_for_the_label_element/） – Quentin

[出力]（https： /developer.mozilla.org/en/docs/Web/HTML/Element/output）。 – Quentin

使用onkeypressイベント：

onkeypress="refferalGen()"

<!DOCTYPE HTML> 
 
<html> 
 
\t <head> 
 
\t \t <title>JS</title> 
 
\t </head> 
 
\t <body> 
 
\t \t <script> 
 
\t \t \t function refferalGen() { 
 
\t \t \t \t var userName = document.getElementById("username").value; 
 
\t \t \t \t var profUrl = document.getElementById("profurl").value; 
 
\t \t \t \t var result = (profUrl) + "?ref=" + (userName); 
 

 
\t \t \t \t document.getElementById("resulttxt").value = result; 
 
\t \t \t } 
 
\t \t </script> 
 

 
\t \t <input style="width:250px" type="text" id="username" onkeypress="refferalGen()" placeholder="Username" /><br> 
 
\t \t <input style="width:250px" type="text" id="profurl" placeholder="Profile Url" onkeypress="refferalGen()" /><br> 
 
\t \t <input style="width:250px" type="text" id="resulttxt" placeholder="Result Will be printed here" /><br> 
 
\t \t <input style="width:250px" type="button" name="clickbait" onclick="refferalGen()" value="Clickbait !" /> 
 

 
\t </body> 
 
</html>

代わりのkeypressあなたもoninputを使用することができるイベント、入力イベントonchangeのように機能しますが、変更イベントは要素がフォーカスを失ったときにのみトリガします。

出典

2016-06-20 09:33:34 hsh

このソリューションをありがとう。大変感謝しています。 – Demoncious

@ Demoncious、あなたは魅力的です。誰かの答えがあなたの問題を解決した場合、それを大きなチェックボックスを使って答えとして受け入れることができます。 – hsh

ボタンのクリックイベントではなく、input,keypressまたはchangeイベントを入力に使用します。

出典

2016-06-20 09:33:40 Quentin

私は4年以上前から 'jQuerying'をやっていましたが、' input'イベントが存在することは分かりませんでした。 –

このスクリプトをjQueryでリアルタイムに作成したいのですが、どうすればいいですか？

答えて

関連する問題