2017-05-26 22 views
0

私はjavascriptが新しいです。私は、ユーザー入力まで待つためのjavascript関数を作りたいと思います。私はプロンプトを使うことができますが、ウィンドウが良く見えないので、私は自分のプロンプトウィンドウを作りたいと思います。私は検索し、jQuery UIを使用してそれを行うことができますか、単にhtml + css + javascriptを使用して私のウィンドウを作成することによって、私の質問ができます:私は自分のプロンプトウィンドウを作成する場合、あるいは、入力が与えられた後に関数を呼び出すだけですか?自分のプロンプトウィンドウがJavaScriptの実行を停止しますか?

これは私が何をしたいのか、基本的である:

function() 
{ 
    var input = MyPrompt(); //Wait here for a user input, like a c scanf 

    //Rest of the function who will use the input given 

} 

私は本当にjavascript関数はscanfのかだろうプロンプトのように、実行を停止していることが必要です。ソリューションのほとんどは、私はあなたのJavaScriptの性質上「確認」ボタンを

おかげ

+1

あなたはMyPromptのためのコードを提供してもらえますか? 'prompt()'、 'alert()'、 'confirm()'のようなデフォルトのブラウザのプロンプトを使用している場合、JS実行をブロックします。 –

+0

はい、alert() promp()またはconfirm()はJSの実行を停止しますが、同じことをするMyPrompt()関数を作成したいが、もっと良いG​​UIを持っていると、オンラインで見たすべての解決策がJSの実行を止めない、ボタンを押した後に新しい関数を呼び出す –

+0

あなたのコードでプロンプトが終了したかどうかを確認するために 'setInterval()'を使うだけです。それはそうではありませんが、他のものを呼び出さないでください。 – Zenoo

答えて

2

をクリックした後、単に関数を呼び出していますのでjavascriptのアプリケーションの実行を「一時停止」する方法はありません。 JavaScriptでは、ほとんどの外部呼び出しハンドラ(NodeJSのURL呼び出しやファイルシステム操作など)はコールバックとして実装されているのです。

EcmaScriptのスペック作成者がasync/awaitfeaturesを提供しようとしていますが、実際これはpromisesの構文的な砂糖です。

あなたの最善の策は、独自の「プロンプト」を作成したり、既存のlike thisのいずれかを使用して、そのプロンプトに「コールバック」として、ユーザの入力を取得した後に何をしたいのかに置くことです。

showMyPrompt({ 
    success: function(value){ console.log('User said ', value); }, 
    close: function(){ //handle pressing of a "cancel" button if needed } 
}) 

とあなたのダイアログ機能に:

function showMyPrompt(params){ 
    // show your prompt here 
    $('.dialog-ok-button').click(function(event){ 
    event.preventDefault(); 
    var value = $('.my-prompt-input').val(); 
    params.success && typeof params.success == 'function' && params.success(val); 
    }); 

    // and do similar for "cancel" 
} 
+0

はい、私はプロンプト()のような実行を停止し、ユーザが入力を与えた後に別の関数を呼び出す関数ではなく、メッセージを表示する関数を望む前に言っています –

1

シンプルasync/awaitベースのソリューションは、次のようになります。 元の関数は、asyncawaitの追加とは別に、同じ方法で記述されています。

function MyPrompt() { 
 
    return new Promise((resolve, reject) => { 
 
     let dialog = document.createElement('dialog'); 
 
     dialog.innerHTML = ` 
 
      <form> 
 
       <input type="text" required> 
 
       <button type"submit">Ok</button> 
 
      </form> 
 
     `; 
 
     document.body.appendChild(dialog); 
 
     dialog.showModal(); 
 
     dialog.querySelector('form').addEventListener('submit', e => { 
 
      e.preventDefault(); 
 
      dialog.remove(); 
 
      resolve(dialog.querySelector('input').value); 
 
     }); 
 
    }); 
 
} 
 

 
(async function() 
 
{ 
 
    var input = await MyPrompt(); //Wait here for a user input, like a c scanf 
 

 
    console.log(input); 
 
    //Rest of the function who will use the input given 
 

 
}());

+0

これの問題は、 MyPrompt()を非同期関数に呼び出す関数であり、私はそれを望んでいません。 しかし、ありがとう;) –

関連する問題