Having an issue with a form that includes a
<textarea>....</textarea><p>...</p>.
The problem arises when trying to edit the field - the lines are correctly displayed as separate lines.
How can I make sure all lines entered in the
<textarea>....</textarea>If you're looking for ways to tackle this issue, here are a couple of methods you can try:
Utilizing <br> Tags
To handle new lines in your paragraph by converting them to <br> tags, you can use the following snippet of code:
var content = $('.textareaClass').val();
$('.paragraphClass').html('<p>' + (content.replace(/\r?\n/g, '<br/>')) + '</p>');
Implementing CSS Styles
An alternative approach is to apply CSS rules to address the line break issue. By adding white-space: pre-wrap rule to your <p> class, you can achieve the desired result. For instance, if your paragraph has the class text-content, simply add:
.text-content {
white-space: pre-wrap;
}
Check out the DEMO: JSFiddle
Hope these solutions prove helpful!
To create a new line in HTML, you can either use the <br> tag to replace the newline character.
$('#text').on('input', function() {
$('#res').html(this.value.replace(/\r?\n/g, '<br>'));
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<textarea id=text></textarea>
<div id=res></div>Alternatively, you can wrap each string after a newline in a p tag like this:
$('#text').on('input', function() {
$('#res').html('<p>' + this.value.split(/\r?\n/).join('</p><p>') + '</p>');
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<textarea id=text></textarea>
<div id=res></div>To achieve the desired result, replace the <p> tags with <pre> and ensure that its width matches that of the <textarea>. Additionally, make sure to include parameters for copying the wrap and scroll behaviors:
function test(){
var thetarget = document.getElementById("b");
thetarget.innerHTML = document.getElementById("a").value;
thetarget.scrollTop = thetarget.scrollHeight;
}body {
background: lavender;
}
textarea, pre {
width: 200px;
height: 176px;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
white-space: pre-wrap;
word-wrap: break-word;
float: left;
margin-left: 10px;
margin-top: 0;
overflow-y: auto;
}<textarea id=a oninput="test()"></textarea><pre id=b></pre>Is there a way to retrieve the ID of an element when it is clicked, only if it has one? I currently have this code set up to alert me with the element's ID: $("[id]").click(function(event) { event.preventDefault(); var id_name = $(this).attr ...
Is there a way to check the dimensions of an image using this function? I want to verify it before uploading... $("#LINK_UPLOAD_PHOTO").submit(function () { var form = $(this); form.ajaxSubmit({ url: SITE_URL + 'functions/_app/execute ...
Before Ajax Call: "{ "UnitOfMeasureRelatedUnitDataInbound": [ { "Name": "test", "Active": true, "UnitOfMeasureTypeID": "dd89f0a0-59c3-49a1-a2ae-7e763da32065", "BaseUnitID": "4c835ebb-60f2-435f-a5f4-8dc311fbbca0", "BaseUnitName": null, ...
After making an AJAX request, I received an HTML page $.ajax({ async: true, method: 'GET', url: linkPage, // cache: true, success: function (data) { console.log(data); } }); The received data is ...
My website features a simple table that displays devices and their characteristics. A condensed version of the table can be found in the link below. import "./styles.css"; import { SubMenu } from "./SubMenu"; const subMenuSlice = <S ...
TL;DR: How can I make IE7 load all hidden elements within a scrollable div? I'm creating a collapsible menu for easy navigation through a series of pages. This menu has two states: collapsed and expanded. Think of the menu items as chapters in a b ...
I am brand new to navigating the world of writing ajax and using a restful api...so please bear with me. On the backend, I have a Laravel 5.2 RESTful API that I'm working with, and my current task involves loading a list of categories using Jquery / ...
I've encountered an issue with Bootstrap Tabs and Jquery in my Asp.net MVC5 web app. Tab 1 (30days) is not loading on page load despite my efforts to troubleshoot the code multiple times. Could someone please review and identify where I may be going w ...
My attempts to integrate an AngularJS directive to remove special characters from input and textarea fields have been unsuccessful. Despite no errors being reported in the console, I am facing issues with the character count tooltip not displaying numbers ...
I have a list of items separated by pipes that spans multiple lines. I am looking to use jQuery to remove the pipe separator for the first item on each line. Example: Red | Green | Blue Purple | Black | White Violet | Yellow | Magenta Here is the code ...
Can anyone help me with a CSS issue I'm experiencing in the latest versions of Chrome and Firefox? I can't seem to figure it out on my own. The problem arises with a container div that has a 50px top margin. Inside this container, there's a ...
With a total of 135 screens in my application, I understand that it may seem like an excessive number. However, due to project requirements, all screens need to be implemented as HTML files, stored in the assets folder, and loaded into two webviews with an ...
As I set up a registration page, I am relying mainly on PHP to validate the data. Realizing that incorporating client-side validation will lessen the server's load, I'm interested in utilizing jquery for this purpose. Specifically, I am seeking ...
Currently, I am implementing a comment reply system for my blog. The commenting feature works well initially. However, when I click the reply button for the second time, it ends up duplicating my reply on the subsequent comment. Surprisingly, this issue do ...
I'm new to working with Django and I could really use some guidance. I'm trying to retrieve the values selected by users from the select options in a form, and then use those values in my views.py file. So far, I haven't had much success wit ...
My current issue involves customizing Joomla article content using a module. I am attempting to hide a div until a user clicks on an input, such as a radio button labeled Test1. Once Test1 is selected, another hidden field within the div should display the ...
Hey there! I'm currently diving into the world of jQuery and encountering an issue with my menu. Whenever I click on a menu item with either the "tm-nav-vertical" or "tm-nav-horizontal" class, it removes the .active class from the initial menu item. I ...
Typically, title attributes in all browsers only appear when the mouse hovers over them. I am looking to also display them when users are focused on them via keyboard navigation. Unfortunately, without using JavaScript, this cannot be achieved solely throu ...
Is iPhone compatible with AJAX and jQuery for support? I am working on creating a chatbox for the iPhone using these two technologies. Can they be used on MobileSafari? ...
My challenge involves integrating JSON data from a Laravel controller into a jQuery jTable for display. Although the table successfully receives the data upon request, it fails to display it as intended. The jTable is configured using the code below: $(& ...