1
ブックマークjavascript:のブックマークを使ってページの動作を修正しようとしています。現在の環境でプラグイン（または他のほとんどのもの）を作成できないためです。showModalを使用して、約束どおりにコンテンツを完全にブロックする方法？
一部の種類のグローバルキャプチャが含まれているページでは、予想される入力キーを除いてほとんどすべてが正常に動作しています。このようなものは何が起こるかです：
(function(){
window.dialog = dialog
function dialog (title, callback, value) {
let alertDialog = document.getElementById('alertDialog')
if (alertDialog) alertDialog.remove()
let htmlDiv = document.createElement('div')
let html = `<div>dummy</div>
<dialog id="alertDialog">
<form method="dialog">
<section>
<p>
<label for="value">${title}</label>
<br />
<input type="text" name="value" value="${value}">
</p>
</section>
<menu>
<button id="cancel" type="reset">cancel</button>
<button type="submit">ok</button>
</menu>
</form>
</dialog>
<style>dialog#alertDialog input { width: 100%; } dialog#alertDialog menu { text-align: center; }</style>`
htmlDiv.innerHTML = html.replace(/^\s*</gm,'<').replace(/[\n\r\t\0\f\v]/g,'') // "minify" else append child fails, although...
.replace('> <', '><') // ...after jscompress minifies this and we paste into bookmark, it adds those spaces which would yield to append child error
alertDialog = htmlDiv.childNodes[1]
document.querySelector('body').appendChild(alertDialog)
let cancelButton = alertDialog.querySelector('#cancel')
if (cancelButton) cancelButton.addEventListener('click', function() { alertDialog.close() })
let input = alertDialog.querySelector('input')
if (typeof callback === 'function') {
alertDialog.onsubmit = function(){ callback(input ? input.value : true) }
alertDialog.oncancel = function(){ callback(false) }
}
if (value !== undefined) {
alertDialog.showModal() // prompt
} else {
alertDialog.querySelector('input').remove()
if (title.substr(-1) === '?') {
alertDialog.showModal() // confirm
} else {
alertDialog.querySelector('#cancel').remove()
alertDialog.showModal() // alert
}
}
return null
}
// dialog('foo!')
}())<body onkeypress="handle(event)">
<form action="#">
<input type="text" name="txt" />
<a href="javascript:window.dialog('foo!')">modal</a>
</form>
<script>
function handle(e){
if(e.keyCode === 13){
e.preventDefault(); // Ensure it is only this code that rusn
alert("Enter was pressed was presses");
}
}
</script>
</body>私はこのDOMを変更してformにbodyからonkeypressを動かすことができれば、問題は解決しました。私は変更しようとしているページに入力キャプチャイベントがどこにあるか分からない。
alert,confirmおよび/またはpromptを使用する以外は、これを解決する一般的な方法がありますか？ 1時間そこに私はusing promises or yield助けるかもしれないと思ったが、それはしなかった。
私は他の多くの問題を解決するため、（またはシンプルさと小さなコードを含む少なくともすべての機能を備えたもの）を使い続けたいと思います。
HTMLDialogElementインターフェイスのshowModal（）メソッドが存在する可能性のある他のダイアログの上に、モーダルとしてダイアログが表示されます。
the docsはこれを約束行います。これは:: backdrop擬似要素とともに最上層に表示されます。ダイアログの外の対話がブロックされ、対話以外の対話が不活性になります。
しかし、それは今は完全ではありませんか？