Editable span Option

Question

Editable span Option

One of my skills includes creating a dynamic contenteditable span within text that can expand and contract, as well as wrap around multiple lines without taking up the entire width:

div {
  width: 100px;
  background: #f00;
  padding: 5px;
}

span {
  border: 1px solid #000;
}

<div>
  <span contenteditable="true">Type Something</span>
</div>

I understand the difficulties and complexities associated with using contenteditable and prefer plain text. In order to achieve this, I am interested in using an <input type="text">. Is there a way to apply CSS/JS to make it function in a similar manner without having to simulate it programmatically with multiple input fields?

Explanation

A textarea is set to display: inline-block, however, setting it as inline does not truly replicate the behavior of an inline element like a span. Therefore, it does not serve as the alternative solution I am seeking.

javascript html css contenteditable

Answer 1

Answer №1

When faced with a similar task in the past, I had to get creative and essentially create a custom textarea using div elements for each line, a span for the cursor, and some additional styling.

Here's the basic concept:

let $ = document.querySelector.bind(document);
let text = 'Type Something';
let cursor = text.length;

let updateDisplay = () => {
  $('#pre-text').textContent = text.substr(0, cursor);
  $('#post-text').textContent = text.substr(cursor);
};

document.addEventListener('keyup', e => {
  switch (e.key) {
    case 'ArrowLeft':
      cursor--;
      break;  
    case 'ArrowRight':
      cursor++;
      break;  
    case 'Backspace':
      text = text.substr(0, cursor - 1) + text.substr(cursor);
      cursor--;
      break;
    case 'Delete':
      text = text.substr(0, cursor) + text.substr(cursor + 1);
      break;
    default:
      if (e.key.length === 1) {
        text = text.substr(0, cursor) + e.key + text.substr(cursor);
        cursor++;
      }
  }
  updateDisplay();
});

updateDisplay();

div {
  width: 100px;
  border: 1px solid #f00;
  padding: 5px;
}

span#cursor {
  background: #000;
  width: 1px;
  height: 1em;
  display: inline-block;
}

<div>
  <span id="pre-text"></span>
  <span id="cursor"></span>
  <span id="post-text"></span>
</div>

Answer 2

When faced with a similar task in the past, I had to get creative and essentially create a custom textarea using div elements for each line, a span for the cursor, and some additional styling.

Here's the basic concept:

let $ = document.querySelector.bind(document);
let text = 'Type Something';
let cursor = text.length;

let updateDisplay = () => {
  $('#pre-text').textContent = text.substr(0, cursor);
  $('#post-text').textContent = text.substr(cursor);
};

document.addEventListener('keyup', e => {
  switch (e.key) {
    case 'ArrowLeft':
      cursor--;
      break;  
    case 'ArrowRight':
      cursor++;
      break;  
    case 'Backspace':
      text = text.substr(0, cursor - 1) + text.substr(cursor);
      cursor--;
      break;
    case 'Delete':
      text = text.substr(0, cursor) + text.substr(cursor + 1);
      break;
    default:
      if (e.key.length === 1) {
        text = text.substr(0, cursor) + e.key + text.substr(cursor);
        cursor++;
      }
  }
  updateDisplay();
});

updateDisplay();

div {
  width: 100px;
  border: 1px solid #f00;
  padding: 5px;
}

span#cursor {
  background: #000;
  width: 1px;
  height: 1em;
  display: inline-block;
}

<div>
  <span id="pre-text"></span>
  <span id="cursor"></span>
  <span id="post-text"></span>
</div>

Editable span Option

Explanation

Answer №1

Similar questions

Tips for troubleshooting the error "Cannot locate module mp3 file or its associated type declarations"

What is the best way to send a variable or query to a Python script from PHP using an Ajax request?

Avoiding Scroll Reset on Browser Navigation with Delayed Transition

margin-top aligned to the bottom of two elements

Ensuring a URL is W3C compliant and functions properly in an Ajax request

Guide on designing a form for generating custom URLs

A guide on navigating full images using CSS

What is the best way to change data into an array using Java script?

Remove the div of the previous selection in jQuery and add the current selection by appending it, ensuring only one selection per row is allowed when

Colorbox scalePhotos function malfunctioning

jQuery - Reveal one div while concealing another

Creating a Random Initial Index using jQuery

In JavaScript, the function will return a different object if the string in an array matches the

Invoking functions within a jQuery extension

Guide on scraping a site that employs Direct Web Remoting (DWR) for generating Javascript to interact with the HTML content of the page

Access to the remote resource at https://localhost:8000/users/login has been blocked due to a Cross-Origin Request restriction imposed by the Same Origin Policy

Why is it considered bad practice to utilize cacheStorage outside of a serviceWorker?

Error in JSON data structure while transferring data from Jquery to PHP

Designing a website similar to sevenly.org using jquery: A step-by-step guide

HTML features various product displays across multiple pages