5

I want to create a text input which does not allowed to input any character (same as disabled input, but the mouse cursor still shown)

function loadPage() {
  const el = document.getElementById('input-id');
  el.addEventListener('keydown', (event) => {
        event.preventDefault();
  });
}
loadPage();
<input maxlength="0" id="input-id">

The above code works fine for normal alphabet characters. However, when I use IME to type Japanese fullwidth character, it does not work (still can input character)

Do you know where is the problem, and is there anyway to workaround?

CertainPerformance
  • 356,069
  • 52
  • 309
  • 320
Waveter
  • 890
  • 10
  • 22
  • 1
    `EventObject.preventDefault()` belongs to the `EventObject`, not the Element. The `EventObject` is passed to the EventListener when an `Event` occurs, like `el.onkeyup = function(eventObj){ eventObj.preventDefault(); }`. My guess is you really want `readonly='readonly'` as an HTML attribute, in this case. – StackSlave Oct 01 '19 at 04:19
  • If you want disabled input with cursor use this, – Casper Oct 01 '19 at 04:21
  • 1
    @CertainPerformance: I am sorry, the original code was incorrected. I corrected the code – Waveter Oct 01 '19 at 04:21
  • Thanks, that makes sense. Sounds like the issue is that the browsers use different methods to insert the characters - if `keydown` doesn't cut it, you probably need to add the listener for other related events too. (input? keyup? keypress? Try it, one of those might do it for you) – CertainPerformance Oct 01 '19 at 04:26
  • Are you sure the characters are actually being inputted? Usually with Japanese IMEs, the characters have to be selected first, then after pressing the enter key, the characters are flushed to the input box. Your example works for me with full-width Japanese characters. I'm still able to type kana and choose the correct kanji, but when pressing enter to flush the characters, nothing actually gets inserted into the input box. (I'm on Mac OS by the way. Not sure if Windows is any different.) – jknotek Oct 01 '19 at 04:26
  • Wouldn't setting `readonly` for the input do? It behaves a bit differently across the browsers, in some browsers the cursor is not shown, but you can select text from the element while you can't change the value. If you want to go with JS, use `input` event instead of Keyboard Events. – Teemu Oct 01 '19 at 04:30
  • @CertainPerformance I tried these methods too, but none of them work – Waveter Oct 01 '19 at 04:37
  • @jknotek In the Windows, the behavior is the same – Waveter Oct 01 '19 at 04:38
  • @Teemu If we set readonly, the cursor is not shown – Waveter Oct 01 '19 at 04:39
  • 1
    To do this with Javascript, you need to somehow identify which event that results in the added character is being fired, you could consider adding listeners via https://stackoverflow.com/questions/1599216/how-to-trace-or-debug-all-available-javascript-events – CertainPerformance Oct 01 '19 at 04:39

1 Answers1

0

For IME specific events, take a look at Composition Event Types specification. Basically, there are three events handy for what you need compositionstart, compositionupdate and compositionend.

Martin Janíček
  • 444
  • 1
  • 6
  • 13