Comment utiliser showModal pour bloquer complètement le contenu tel que promis?

J'essaie de modifier un comportement de page avec un javascript: bookmark, car je ne peux pas créer de plugins (ou presque tout autre chose) dans mon environnement actuel.

Presque tout fonctionne bien, sauf la clé entrée attendue dans certaines pages, qui contiennent une sorte de capture globale pour elle. Quelque chose comme ça c'est ce qui se passe:

 (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> &nbsp; <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>

Si je pouvais changer ce DOM et déplacer le onkeypress sur le body dans le form , le problème était résolu. Mais je ne sais même pas où l'événement de saisie est dans la page que j'essaie de modifier.

Autrement que d'utiliser l' alert , confirm et / ou prompt , existe-t-il une approche générique pour résoudre ce problème? Pendant une heure là-bas, je pensais que l' utilisation de promesses ou de rendement pourrait aider, mais ce n'était pas le cas.

Je veux continuer à utiliser (Ou quelque chose avec au moins toutes les fonctionnalités, y compris la simplicité et le petit code) car il résout beaucoup d'autres problèmes pour moi.

Les docs promettent ceci:

La méthode showModal () de l'interface HTMLDialogElement affiche la boîte de dialogue comme modal, en haut de toutes les autres boîtes de dialogue qui pourraient être présentes. Il s'affiche dans la couche supérieure, avec un pseudo-élément de fond de page. L'interaction en dehors de la boîte de dialogue est bloquée et le contenu à l'extérieur est rendu inerte.

Mais ce n'est pas tout à fait vrai maintenant, n'est-ce pas?

enfin! Cela a fonctionné.

D'abord, j'ai pensé «essayons simplement de remplacer l' onkeypress », mais alors qu'il fonctionnait dans cette instance singulière, ce n'était pas dans mon environnement. Ensuite, j'ai pensé "oh, peut-être sur la clé". Et donc c'était. 🙂

Donc, en fin de compte, la déclaration n'est pas tout à fait fausse. Ce n'est tout simplement pas empêcher d'autres événements de se propager, probablement par conception, car il existe des ressources pour le faire si vous le souhaitez. (À savoir, dans ce cas, stopPropagation ).

 (function(){ window.overrideEnter = overrideEnter function overrideEnter (event) { if (event.keyCode == 13) { event.stopPropagation() } } 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" onkeypress="return window.overrideEnter(event)" onkeydown="return window.overrideEnter(event)" onkeyup="return window.overrideEnter(event)"> <section> <p> <label for="value">${title}</label> <br /> <input type="text" name="value" value="${value}"> </p> </section> <menu> <button type="submit">ok</button> &nbsp; <button id="cancel" type="reset">cancel</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') cancelButton.addEventListener('click', function(){ alertDialog.close(); callback(false) }) let input = alertDialog.querySelector('input') //console.log(input) if (typeof callback === 'function') { alertDialog.onsubmit = function(){ callback(input ? input.value : true) } alertDialog.oncancel = function(){ callback(false) } alertDialog.onclose = function(){} } document.onkeydown = function(event) { event = event || window.event if (event.keyCode == 13) { event.stopPropagation() } } if (value !== undefined) { alertDialog.showModal() // prompt } else { input.remove() input = undefined if (title.substr(-1) === '?') { alertDialog.showModal() // confirm } else { cancelButton.remove() alertDialog.showModal() // alert } } return null } }())

 <body onkeypress="handle(event)"> <form action="#"> <input type="text" name="txt" /> <a href="javascript:window.dialog('foo?', result => console.log(result))">modal</a> </form> <script> function handle(e){ if(e.keyCode === 13){ e.preventDefault() alert("Enter was pressed was pressed") } return true } </script> </body>