spopa
PD🧩 Plasmo Developers
•Created by spopa on 10/16/2023 in #🔰newbie
Input box Backspace events are prevented
So on the actual website's textboxes, the backspace event works and preventDefault is false.
I've tried adding the onkeydown and onkeypress but they are deprecated and didn't work. I also tried adding an event listener and trying things in there (I see the Backspace pressed log):
document.addEventListener('keydown', function (event) {
console.log('event ', event)
if (event.key === 'Backspace') {
console.log('Backspace pressed')
// return event.charCode >= 48 && event.charCode <= 57 || event.key === "Backspace"
// return event.preventDefault() // Prevent default behavior
// return event.defaultPrevented == false
// return true
}
})
It is a read-only field. Trying to change it didn't work. I don't have any e.preventDefault's applied elsewhere. And yea, delete works just fine as well as everything else. Just not backspace. Super weird.
15 replies
PD🧩 Plasmo Developers
•Created by spopa on 10/16/2023 in #🔰newbie
Input box Backspace events are prevented
Hi @louis, thanks for the response. Looks like I am doing what that guide is saying. Here is a tiny snippet of my code for one textbox in a modal:
import { useEffect, useRef, useState } from "react"
export default function SelectEodModal({ onClose, onSubmit }: { onClose: () => void; onSubmit: (selectedOption: string) => Promise<void> }) {
const eodFormRef = useRef(null)
const [selectedTextVisitStatusOther, setSelectedTextVisitStatusOther] = useState("")
const handleSelectedTextVisitStatusOther = (e) => {
const value = e.target.value
setSelectedTextVisitStatusOther(value)
}
return (
<div className="font-sans bg-white rounded-lg shadow-lg p-4 text-center">
<form id="eodForm" className="modal-content" ref={eodFormRef}>
<div id="other-input-container" className="mt-1">
<label>Please specify: </label>
<input type="text" className="w-full p-1 text-sm" value={selectedTextVisitStatusOther} onChange={handleSelectedTextVisitStatusOther} required />
</div>
</form>
</div>
)
}`
I am using PlasmoGetInlineAnchorList to get all rows in a table to inject a button in each row. When you click on the button, it opens up the modal.
I also noticed that the faxing modal that you helped with in the past also does not allow you to use the backspace button to delete characters in the textbox.
I'm thinking this might not be a Plasmo issue, but maybe a CSS issue or possibly something else? Could a CSS issue prevent backspace from working in a modal? All other keys I've tried using work in the textbox.
15 replies