Enhance your textarea with stylish bullet points on each new line

Users should be able to input text in a textarea field

<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 p-0">
  <div class="blu-heading">Clarification Remarks</div>
  <div class="table-responsive tabledesign">
    <table class="table table-bordered" id="mytable1">
      <thead>
        <tr>
          <th>Sr.No.</th>
          <th scope="col">Remarks</th>
          <th scope="col">Date of Query</th>
          <th scope="col">User Remarks</th>
          <th scope="col">Date of Reply</th>
        </tr>
      </thead>
      <tbody>
        <c:forEach items="${lmApplicationRemarks}" var="doc" varStatus="status">
          <tr>
            <td>${status.index + 1}</td>
            <td>${doc.remarks}</td>
            <td>
              <fmt:formatDate value="${doc.dateQuery}" pattern="dd/MM/yyyy" />
            </td>
            <td>${doc.userRemarks}</td>
            <td>
              <fmt:formatDate value="${doc.dateReply}" pattern="dd/MM/yyyy" />
            </td>
          </tr>
        </c:forEach>
      </tbody>
    </table>
  </div>
</div>

My current output looks like this:
1. Please update full detailed address of the factory location on the application. 2. You are requested to submit suggested/estimated turnover from the project for the next 3-5 years. 3. You are requested to provide a declaration stating that the company abides by the Press No.

I want it to look like this:
1. Please update full detailed address of the factory location on the application.
2. You are requested to submit suggested/estimated turnover from the project for the next 3-5 years.
3. You are requested to provide a declaration stating that the company abides by the Press No.

Answer №1

Here is a sample JavaScript code that automatically adds a specified string at the beginning of each line within <textarea> elements with the class of "txtarea".

let stringChar = "■√•●⦿►☼☻"; // defining the string to add
let x = document.getElementsByClassName("txtarea");
for (let el = 0; el < x.length; el++) {
  let resultText = (x[el].value != "") ? stringChar : "";
  for (let a = 0; a < x[el].value.length - 1; a++) {
    if (x[el].value[a] == '\n') {
      resultText += "\n" + stringChar;
    } else {
      resultText += x[el].value[a];
    }
  }
  x[el].value = resultText;
}
.txtarea {
  width: 100%;
  min-height: 5rem;
}
<textarea class="txtarea">
1. Please update full detailed address of the factory location on the application.
2. You are requested to submit suggested/estimated turnover from the project for the next 3-5 years.
3. You are requested to provide a declaration stating that the company abides by the Press No.
</textarea>

<textarea class="txtarea">
Please update full detailed address of the factory location on the application.
You are requested to submit suggested/estimated turnover from the project for the next 3-5 years.
You are requested to provide a declaration stating that the company abides by the Press No.
Please update full detailed address of the factory location on the application.
You are requested to submit suggested/estimated turnover from the project for the next 3-5 years.
You are requested to provide a declaration stating that the company abides by the Press No.
</textarea>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ensure that the search button remains at the bottom of the view without overlapping its container

this codepen link will take you to the relevant content https://codepen.io/rad-mej/pen/qBKedwB I have a fixed search menu on the left, along with data displayed on the right. The search menu contains a search button that I want to be anchored to the bott ...

"Exploring the Django framework's hidden pathways to

I am looking to include a CSS file in the header of my documents, but I have a couple of questions: 1. Where should I specify the path to the media, and should it be a relative or absolute path? In settings.py, I've attempted to set MEDIA_URL, but my ...

Using Python and Selenium to manipulate the webpage and execute JavaScript can help reconstruct the true HTML structure

I have a very basic Selenium code snippet that I am running: <input name="X" id="unique" value="" type="text"> <script> document.getElementById("unique").value="123"; </script> While I can retrieve the input value "123" using driv ...

Counting records in a nested ng-repeat using AngularJS

As a newcomer to AngularJS, I am facing an issue with a nested ng-repeat using a custom filter. I want to display the record count of Orders being shown, but when applying a product filter, it does not work as expected. For instance, if an order has no pro ...

What is the best way to make a deep clone of an object containing a React element?

When deep cloning an object containing a react element, the element breaks and becomes unrenderable. Check out this example to see the issue demonstrated. import React from "react"; import "./styles.css"; import Demo from "./Demo"; export default functi ...

Is it possible for screen readers to audibly announce lists with the type attribute set to "a" within the <ol> element

Currently revamping a large amount of content in the thousands for a Drupal website. The content includes ordered lists with alphabetical type. Example: a. foo b. bar c. char The screen reader is not able to read the "a." or any of the alpha bulle ...

The dropdown menu in Svelte is malfunctioning when only one option is available

One issue I am facing in my Svelte application is with a dropdown menu that displays a list of players. I am trying to implement a search functionality where the dropdown menu should only show players that match the search query. However, I have encountere ...

Middleware running twice

I developed a custom Middleware to handle my page requests, but I'm facing an issue where it seems to be running twice... The first run goes smoothly without any errors, but the second time around, I encounter errors... Here is the code snippet: ap ...

Top method for inverting the sequence of list elements

I've got this Skype history saved as HTML, with 20,000 list items < li > in reverse order. How can I swap them around so that the first item becomes the last and vice versa? Is there a PHP solution for this, or is there a simpler way using spec ...

Is there a way in AngularJS utilizing ui-router to retrieve the ngResource error from $stateChangeError when a request fails in the resolve section of a state?

Check out this plunker where I am facing an issue: http://plnkr.co/edit/vdctsTcMq4nD1xpUl3pu The problem is that the $resource promise is being rejected due to a request failure (404 error). I am aware that I can handle the error within the resolve block ...

Retrieving information from an Object within a JSON response

After calling my JSON, I receive a specific set of arrays of objects that contain valuable data. I am currently struggling to access this data and display it in a dropdown menu. When I log the response in the console, it appears as shown in this image: htt ...

Updating the color of HTML button text dynamically using JavaScript function

I am attempting to create a function that will change the text color of a button in a sequence - red on the first click, green on the second click, and back to black on the third click (and so forth). I thought this would be straightforward to achieve with ...

The AR.js documentation example is not functional when initially tested

Struggling with AR.js, I decided to start fresh and go back to basics. My goal is to place a gltf file on a custom marker. I referred to the documentation at () for the image tracking example: <script src="https://raw.githack.com/AR-js-org/AR.js/ ...

How can I refresh the container with a new version of the file using PDFObject?

I'm having trouble with a button that generates a PDF and then reloads the PDF in the browser by replacing the container it's in, but with a different link. Despite my efforts, the new PDF does not show up and the old one remains even after refre ...

Can you identify the variances in the React codes provided? Is one more optimized or impactful than the other, or do they essentially perform the same function?

Currently working on a project where I have two different sets of code and I'm curious about the differences between them. Using ReactJS (latest version) Set 1: columns.map(v => v.aggregate = (values) => values[0]); Set 2: columns = columns ...

prevent parent jQuery functions from interfering with child function execution

I am facing an issue with conflicting jQuery functions between parent and child elements. The child function is a bootstrap function, while the parent is a custom function. The main objective is to limit the height of the parent div (refer to the code belo ...

The index named "name" has not been defined

I keep encountering this message when trying to load the form: Notice: Undefined index: name in C:\xampp\htdocs\main.php on line 267 Notice: Undefined index: email in C:\xampp\htdocs\main.php on line 275 Notice: U ...

Trigger a single occurrence of the function upon element creation and pass it to VueJS methods

Currently, I am working with BootstrapVue and would like to provide a brief overview of my code: I have a v-for loop with inputs that can be dynamically created using a b-button named "addElement". Additionally, I have the option to select an item from a ...

PHP code for uploading multiple images at once

I am currently facing an issue with uploading multiple files at once and not getting the desired result. Below is my code snippet: <?php if (isset($_FILES['uploadfiles'])) { print_r($_FILES); } ?> <form action="index.php" method="po ...

How to center elements vertically within a div using CSS

I am trying to align the contents vertically in a div, but the first div does not seem to be centered like the second one. I need both of them, along with their children, to be vertically centered inside the div. For example: [type='file'] { b ...