javascripthtmlcssbootstrap-5

Prevent Boostrap form control focus glow on click

I have built a virtual directory where users can change file / directory names.

Names can only be changed with a double click:

<input type="text"
                   class="form-control border-0 p-0 mb-1"
                   onblur="this.readOnly='true';"
                   readonly="true"
                   ondblclick="handleDbClick(this)"
                   onkeydown="handleEnter(event, this)"
                   value="{{ dict.directory.current_name }}" />

but if I click on the input field once, there is still the glow thing around the input : enter image description here

I want to achieve, that the blue glow thing only appears on a double click on the input, when it's editable.

Solution

  • You could add a class that disables the style (box shadow when input is focused):

      .nofocus:focus {
    box-shadow:none;
  }

    and then, in your event handlers, enable the style by removing the class, and adding it.

    For example, add it in your double click handler

      el.classList.remove('nofocus');

    and remove it when enter key is pressed in keydown handler

      if (evt.keyCode === 13) el.classList.add('nofocus');

    and extend blur handler to toggle it (you could also add isEditing variable which would hold input state, and prevent hiding if input is being edited, depending on the logic of your workflow).

      if (!el.classList.contains('nofocus')) el.classList.add('nofocus');

    demo:

    .as-console-wrapper { max-height: 10% !important; bottom: 0; }
    <!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
   
    <title>Bootstrap Example</title>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    <style>
      .nofocus:focus {
        box-shadow:none;
      }           

    </style>
  </head>
  <body class="p-3 m-0 border-0 bd-example m-0 border-0">

    

    <input type="text"
    class="form-control border-0 p-0 mb-1 nofocus"
    onblur="handleBlur(this)"
    readonly="true"
    ondblclick="handleDbClick(this)"
    onkeydown="handleEnter(event, this)"
    value="{{ dict.directory.current_name }}" />



  <script>
    
    let isEditing = false;

    function handleBlur(el) {
      console.log('handleBlur');
      if(!isEditing) {        
        if (!el.classList.contains('nofocus')) {
          el.classList.add('nofocus');
          el.readOnly = 'true';
        }
      } else {
        el.focus();
      }


    }

    function handleEnter(evt, el) {
      if(!isEditing) return;
      console.log('handleEnter');
      el.removeAttribute('readonly');
      if (evt.keyCode === 13) {
          el.classList.add('nofocus');
          el.readOnly = 'true';
          isEditing = false;
      }
    }

    function handleDbClick(el) {
      isEditing = true;
      console.log('handleDbClick');
      el.classList.remove('nofocus');
    }
  </script>
      
 
  </body>
</html>