Elegant bespoke input box

Question

Elegant bespoke input box

I am looking to create a customized input text feature similar to StackOverflow's tag editor, but with some minor differences. The goal is for the input field to function like a regular text input until a word is enclosed in curly brackets. Once enclosed, that word should transform into a "different element" with unique styling and behavior. For example, clicking on the enclosed word could trigger a popup dialog while the rest of the text remains unchanged.

How challenging would it be to develop this functionality? For instance:

Imagine typing "Lorem ipsum {dolor" and as soon as you close the curly bracket, "{dolor}" changes to have an orange background, becomes clickable, etc. (using "dolor" and "amet" within the curly brackets in this scenario)

This concept mirrors how the tag editor works on StackOverflow, though my version would not involve left-floating tags.

Have you come across anything similar or do you have examples or ideas to share?

javascript html css

Answer 1

Answer №1

Simply insert user input text into a p, div, or span tag as they type. Use a marker element like <span> to represent opening curly braces "{" and closing curly braces "}". Also, implement a click event for this marker.

$(document).on("click paste change input", "input", function() {
  $("#display").html(
    $(this).val().replace("{", "<span>").replace("}", "</span>")
  );
});

$(document).on("click", "#display", function(){
  $("input").focus();
});

$(document).on("click", "#display span", function(e) {
  e.preventDefault();
  alert($(this).text());
})

#display span {
  background-color: yellow;
  cursor: pointer;
}

input {
  opacity: 0.1;
  position: relative;
  z-index: 5;
  top: 50px;
}

#display {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 4;
  background-color: #ddd;
  height: 20px;
  width: 100%;
  line-height: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type='text' value='Click to {start} typing' />
<div id='display'>Click to <span>start</span> typing</div>

Answer 2

Simply insert user input text into a p, div, or span tag as they type. Use a marker element like <span> to represent opening curly braces "{" and closing curly braces "}". Also, implement a click event for this marker.

$(document).on("click paste change input", "input", function() {
  $("#display").html(
    $(this).val().replace("{", "<span>").replace("}", "</span>")
  );
});

$(document).on("click", "#display", function(){
  $("input").focus();
});

$(document).on("click", "#display span", function(e) {
  e.preventDefault();
  alert($(this).text());
})

#display span {
  background-color: yellow;
  cursor: pointer;
}

input {
  opacity: 0.1;
  position: relative;
  z-index: 5;
  top: 50px;
}

#display {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 4;
  background-color: #ddd;
  height: 20px;
  width: 100%;
  line-height: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type='text' value='Click to {start} typing' />
<div id='display'>Click to <span>start</span> typing</div>

Elegant bespoke input box

Answer №1

Similar questions

Instructions on how to bring in the Helper class in a React component

When attempting to update a database, the Jquery ajax response is not being reflected

Attempting to align a header and an unordered list side by side

What is the process for customizing the image size of a WordPress RSS feed in pixels?

Having trouble getting CSS Image Hover to work correctly?

Identifying an anonymous function with a name (using .name versus .displayName)

Is there a way to turn off predictive text for reCAPTCHA on my mobile device?

Display the button exclusively on responsive mobile views

Advantages of using index.js within a component directory

Access and retrieve numerous variables from the data object sent back through an ajax request

The styled-components in CSS are causing some issues with the color themes

Imitate a hover effect followed by a click to activate the pre-established onclick function

What is the method for obtaining the input value of an input type number in HTML?

How can I line up two divs horizontally within a container div?

incorporating a personalized HTMLElement using Typescript

Add an item to an array that contains objects within an array of other objects

CSS: Breaking free from the constraints of a Bootstrap-inspired grid layout

What is the best way to divide a string into chunks of no more than 2000 characters each at the end of

Tips for saving information in an array with Vue.js?

The Vue pagination component is optimized to load a single page at a time