inline-text-input.Rmd

---
pagetitle: Inline Text Input Example
example:
  title: Inline Text Input Example
  runtime: repl
  mode:
    document: html
  initial:
    js: |-
      let inlineInputs = document.querySelectorAll('.inline-text-input input[type="text"]')

      inlineInputs.forEach(el => {
        el.addEventListener('keyup', () => {
          // need to do something smarter here...
          el.style.width = (el.value.length * 8) + 'px'
        })
      })
    css: |-
      .inline-text-input {
        position: relative;
        width: auto;
      }

      input[type="text"] {
        display: inline-block;
        border: none;
        width: auto;
        min-width: 25px;
        max-width: 100%;
      }

      input[type="text"]:hover {
        border-bottom: 1px dashed currentcolor;
      }

      input[type="text"]:focus {
        border-bottom: 1px solid currentcolor;
      }

      .inline-text-input label {
        position: absolute;
        opacity: 0;
        top: -1.1em;
        left: 0;
        font-size: 90%;
        min-width: min-content;
        transition: opacity 0.25s linear;
      }

      .inline-text-input:hover label {
        opacity: 1;
      }
  solution:
    js: |-
      let inlineInputs = document.querySelectorAll('.inline-text-input input[type="text"]')

      inlineInputs.forEach(el => {
        el.addEventListener('keyup', () => {
          // need to do something smarter here...
          el.style.width = (el.value.length * 8) + 'px'
        })
      })
    css: |-
      .inline-text-input {
        position: relative;
        width: auto;
      }

      input[type="text"] {
        display: inline-block;
        border: none;
        width: auto;
        min-width: 25px;
        max-width: 100%;
      }

      input[type="text"]:hover {
        border-bottom: 1px dashed currentcolor;
      }

      input[type="text"]:focus {
        border-bottom: 1px solid currentcolor;
      }

      .inline-text-input label {
        position: absolute;
        opacity: 0;
        top: -1.1em;
        left: 0;
        font-size: 90%;
        min-width: min-content;
        transition: opacity 0.25s linear;
      }

      .inline-text-input:hover label {
        opacity: 1;
      }
output: js4shiny::html_document_js4shiny

---
<div><!--for pandoc-->
<p>
  Of all the places I've been
  <span class="inline-text-input">
    <input type="text" name="place" id="place" size="5" value="Chicago" />
    <label name="place">Name of Place</label>
  </span>
  was my favorite.
</p>
</div><!--for pandoc-->