javacriptとCSSを使用したカスタムプロンプトボックス

Question

私はカスタムプロンプトボックスで作業しています。これまでのところ私はJavaScriptでクリックボタンに表示されて隠されたdiv要素を使用：ここ

function openPromptBox() { 
var pos = FindXY(document.promptForm); 
var cont = $('promptContainer'); 
var searchBox = $('promptBox'); 

searchBox.style.left = (pos.x - 20) + "px"; 
searchBox.style.top = (document.body.scrollTop + 100) + "px"; 

cont.style.display = "block"; 
} 

はdiv要素である：

<div id="promptContainer"> 
<div id="promptBox"> 
    <table> 
     <tr> 
      <td colspan="2"> 
       <input type="text" name="result" id="result" size="25"/> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       <input type="button" id="btnOK" value="OK" /> 
      </td> 
      <td> 
       <input type="button" id="btnCancel" value="Cancel" /> 
      </td> 
     </tr> 
    </table> 
</div>   
</div> 

は今、私は機能openPromptBoxにテキストボックスresultの値を返す必要がありますbtnOKボタンをクリックするたびにそれを行う方法はありますか？

Answer 1

あなたはので、ここではjQueryを使用しているようですが解決策になるようだ：単純に今することができますあなたの入力

のうち、現在の値（テキスト/番号/など）を取る

$('#result').val() 

次のように関数に渡します。

$('#btnOK').on('click', function() { 

    openPromptBox($('#result').val()); 

}); 

これはそれです。

function openPromptBox(textFromInput){ 

    alert(textFromInput); 

} 

JSFiddle：あなたはおそらく、関数で使用されるパラメータを追加する必要がありますあなたの関数の定義において

https://jsfiddle.net/01bkkgzd/2/

UPDATE：それは希望はJQueryなし

be：

document.getElementById("result").value 

onclickのアクションと、次の関数呼び出し

ため

document.getElementById("btnOK").addEventListener('click', function() { 

    openPromptBox(document.getElementById("result").value); 

}); 

を入力

例の値を取得します

JSFiddle：https://jsfiddle.net/01bkkgzd/5/

Answer 2

いいえ、これは不可能です。

promptは、モーダルダイアログを開き、ユーザがいずれかのボタンをアクティブにするまで、すべてのJavaScript（およびページとの対話）をブロックします。

フォームフィールドをHTMLドキュメントに挿入すると、ブロックが発生しなくなります（ユーザーがフォームに入力できなくなる可能性もあります）。

あなたが作成したフォームフィールドにイベントリスナーをバインドし、他のいずれかのように転送する応答を処理する必要があります。asynchronous operation