how to use showModal to completely block content outside as promised?

前端未结

关注

 1  1062

I\'m trying to modify a page behaviour with a javascript: bookmark, as I can\'t make plugins (or almost anything else) in my current environment.

almost eve

相关标签:

1条回答

长发绾君心

2021-01-24 16:57

finally! this worked.

first I figured "let's just try to override the onkeypress", but while it was working in this singular instance, it wasn't in my environment. then eventually I figured "oh, maybe it's on the keydown". and so it was. :)

so, in the end, the statement isn't entirely false. it's just not preventing other events from propagating, probably per design, as there are resources to do it if you need to. (namely, in this case, 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>

0 讨论(0)