The br tag in HTML cannot be utilized in conjunction with JavaScript

I am currently working on a project involving HTML and JavaScript. I have a "textarea" where data is inserted into the database upon pressing the "Enter key." However, I am encountering two issues:

  1. Currently unable to save data like "Lorem Ipsum" (the
    tag is not functioning).

  2. Unable to clear the "textarea"; while the textarea itself clears, the cursor remains instead of displaying the placeholder (as it did before text entry).

Below is my HTML code snippet:

<textarea placeholder="Write a comment..." id="txt'.$FeedId.'" data-txt='.$FeedId.' onkeypress="Addcomment1(this);"></textarea>

And here is my JavaScript code snippet - can you help me identify what may be incorrect?

<script>
function Addcomment1(e) {
    var key = window.event.keyCode;
    var keys = window.event.shiftKey;
     if (key == 13 && keys == false) {
        var txt_id = e.dataset.txt;
        var textareavalue = $('#txt'+txt_id).val();
        $('#txt'+pid).val('');
        ...
    }       
</script>
javascripthtmljquery

Answer №1

For the next issue you're facing, the solution lies in removing the focus from the element. You can achieve this by adding the following lines to your code after clearing the textarea:

$('#txt'+txt_id).val(''); //Clearing the text area
$('#txt'+txt_id).blur();  //Removing the cursor and displaying placeholder

Regarding the initial problem, if you intend to handle line breaks (by pressing enter) rather than inserting <br> directly in the textarea:

If PHP is being used, you can employ the nl2br() function to render line breaks in HTML:

<?php
$text = nl2br($_POST["TEXTAREA_NAME_PUT_HERE"]);
?>

Alternatively, client-side JavaScript can be utilized for this purpose:

var textareavalue = $('#txt'+txt_id).val().replace(/(?:\r\n|\r|\n)/g, '<br>');

In a broader scope utilizing JavaScript:

var textareavalue = $('#txt'+txt_id).val().replace(/(?:\r\n|\r|\n)/g, '<br>');
...//Save textareavalue as needed
$('#txt'+txt_id).val('');
$('#txt'+txt_id).blur();

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

Using React.js to create a modal that includes ExpansionPanelDetails with a Checkbox feature

I am trying to achieve a specific visual effect with my code. Here is an example of the effect I want: https://i.stack.imgur.com/cJIxS.png However, the result I currently get looks like this: https://i.stack.imgur.com/547ND.png In the image provided, y ...

javascriptreactjsmodal-dialogmaterial-uireact-bootstrap

Shift the image down to the bottom of the sidebar

This is the code for my sidebar HTML, with the side navigation bar positioned on the left: #main-container { display: table; width: 100%; height: 100%; } #sidebar { display: table-cell; width: ...

htmlcss

From transitioning from a radio button's checked indicator to a complete button

I'm in the process of customizing my WordPress plugin and seem to be struggling with styling the radio buttons. For reference, you can find the code snippet here: https://jsfiddle.net/cd3wagvh/ The goal is to conceal the radio buttons and modify the ...

htmlcss

Exploring the world of third-party widgets: Comparing Angular, jQuery, and traditional JavaScript

I have a plan to develop a simple embeddable widget similar to Google ads or Facebook like box. Users will be able to easily add the widget to their website and I will extract some parameters to fetch data from my servers. Previously, I relied on jQuery f ...

javascriptjqueryangularjswidget

What is the best way to implement a multi-row form in Vue.js?

Form Structure: <card-wrapper v-for="(passenger, index) in form.passenger" :key="index" :icon="['fas', 'user']" :title="`Passenger ${index + 1}`" class="mb-5" > <validation-observer ...

javascriptvue.jsvuejs2vuexnuxt.js

Make sure to use jQuery waterfall 'reflow' only once all the images have finished loading

Currently, I am utilizing jQuery waterfall to achieve a grid-style display on my website. To address the issue of images overlapping, I have enclosed the waterfall method within a .load() function like this: $(window).load(function(){ $('#buildcon ...

javascriptjqueryhtmlajaxgrid-layout

What is the best way to retain AJAX data even when navigating back without losing it?

After receiving an Ajax response, I display a set of data on my home page. When I click on any of the data, it takes me to another page. However, when I click the back button on the browser, it just navigates me back to the homepage without showing the A ...

phpjavascriptjqueryajaxzend-framework

Display Email content within a bootstrap modal using CSS styling

Is there a way to prevent CSS from overwriting tags on my original page when loading an email body into a modal via ajax call? The email body has its own CSS styles that are affecting the layout of my current page. I've considered renaming all the tag ...

jquerycsstwitter-bootstrap

How can we compress videos on an Android device prior to uploading them through a web browser?

Can video compression be done prior to uploading via a web browser? For example, in iOS devices you can choose a video using the HTML input type file tag and iOS will automatically compress it before uploading. Are there any JavaScript or jQuery libraries ...

javascriptandroidjqueryandroid-browser

Prevent duplication in HTTP POST requests using Express and Node.js

How can I prevent a duplicate object from being created during a post request if the object already exists? I have included my code and JSON object below. I attempted to use next(), but it did not work as expected, resulting in a new object with a differen ...

javascriptnode.jsexpress

A custom script developed to detect the presence of the numeric combination "11" and promptly notify the

I am attempting to develop a unique chrome extension that detects typing errors in orders. For example, if the user accidentally types "11" instead of "1", an alert should be triggered. However, I am encountering an issue where the script is running in an ...

javascriptgoogle-chromekeycode

We were unable to load the resource because the server returned a 404 (Not Found) error. The EnterpriseMaster/BindNatureofAssignment feature is not functioning properly after being published

While the code is working perfectly fine on localhost, as soon as I publish it I encounter an error that prevents the table from loading. EnterpriseMaster/BindNatureofAssignment:1 Failed to load resource: the server responded with a status of 404 (Not ...

javascriptangularjsasp.net-mvc

Exploring AngularJS capabilities: Retrieving data and headers from an HttpResponse

Currently, I have a REST API developed using Spring Boot. In the frontend, AngularJS 1.5 is being used. The login service not only sends data but also includes a header. I am wondering how I can effectively read both the data and header on the AngularJS ...

javascriptangularjsspringhttp-headershttpresponse

Open the HTML document and access the file contents

I'm having trouble reading a text file from my computer onto a website. It works fine in Internet Explorer, but won't work in Chrome. I don't have much experience with HTML, so any help would be much appreciated! <html> <body> ...

javascripthtmlajaxgoogle-chrome

The content of the string within the .ts file sourced from an external JSON document

I'm feeling a bit disoriented about this topic. Is it feasible to insert a string from an external JSON file into the .ts file? I aim to display the URLs of each item in an IONIC InAppBrowser. For this reason, I intend to generate a variable with a sp ...

javascriptangulartypescriptionic-framework

Stop a second ajax request while the first one is in progress

Despite the abundance of questions on Stack Overflow addressing this issue, I still can't find a solution. Here is the jQuery code snippet: function _get_activities_ajax() { $(".activity-accordian h3").click(function() { var catrgory ...

jqueryajax

The text stubbornly refusing to conform to a single line

I am currently experiencing an issue where the text inside the anchor tag is not adjusting to a single line. Below is my HTML code: <html> <head> <link rel="stylesheet" href="style5.css" type="text/css"> </head> ...

htmlcssxhtmldreamweaver

Is it necessary to specify the server-side script within the "routes" directory?

I'm currently developing a NodeJS Express application and from what I gather, the communication between the server and client is achieved by incorporating an AJAX script in a JavaScript file (on the client-side) and implementing a listener function (f ...

javascriptajaxnode.jsexpress

How to eliminate ampersands from a string using jQuery or JavaScript

I'm having trouble with a seemingly simple task that I can't seem to find any help for online. My CSS class names include ampersands in them (due to the system I'm using), and I need to remove these using jQuery. For example, I want to chan ...

javascriptjqueryhtmlcss

The JavaScript-generated form element will not be included in the data submitted through the POST method

While it may appear that this question has been asked before, my specific inquiry seems to be unique as I have not found a similar answer in other threads. Therefore, I am initiating a new discussion. My issue revolves around a form which contains a link ...

javascriptjqueryhtmlforms