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 everything is working fine, except the expected enter key in some pages, which contain some kind of global capture for it. something like this is what happens:
(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>if I could change this DOM and move the onkeypress from the body into the form, problem solved. but I don't even know where the enter capture event is in the page I'm trying to modify.
other than using alert, confirm and/or prompt, is there a generic approach to resolve this? for one hour there I thought using promises or yield might help, but it didn't.
I want to keep using (or something with at least all features, including simplicity and small code) as it resolves a lot of other problems for me.
the docs do promise this:
The showModal() method of the HTMLDialogElement interface displays the dialog as a modal, over the top of any other dialogs that might be present. It displays into the top layer, along with a ::backdrop pseudo-element. Interaction outside the dialog is blocked and the content outside it is rendered inert.
but that's not entirely true now, is it?
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>
<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>来源：https://stackoverflow.com/questions/43183930/how-to-use-showmodal-to-completely-block-content-outside-as-promised