When working with multiline textboxes in ASP.NET, the newlines in JavaScript are not recognized

On my asp.net form, I have a multi-line textbox and I am using the following JavaScript function on the paste event.

When I paste data, any new lines are being ignored.

I suspect there might be an issue with the JavaScript function. Even though I can see '\n' in the inner text, it is not rendering properly. For example, "hello\nworld" is displayed as "hello world".

function handlepaste(textbox, e, label, len) {
    var savedcontent = textbox.innerHTML;
    if (e && e.clipboardData && e.clipboardData.getData) {// Webkit - get data from clipboard, put into editdiv, cleanup, then cancel event
        if (/text\/html/.test(e.clipboardData.types)) {
            textbox.innerHTML = e.clipboardData.getData('text/html');
        }
        else if (/text\/plain/.test(e.clipboardData.types)) {
            textbox.innerHTML = e.clipboardData.getData('text/plain');
        }
        else {
            textbox.innerHTML = "";
        }
        waitforpastedata(textbox, savedcontent);
        if (e.preventDefault) {
            e.stopPropagation();
            e.preventDefault();
        }
        return false;
    }
    else {// Everything else - empty editdiv and allow browser to paste content into it, then cleanup
        textbox.innerHTML = "";
        waitforpastedata(textbox, savedcontent, label, len);
        return true;
    }
}

function waitforpastedata(elem, savedcontent, label, len) {
    if (elem.childNodes && elem.childNodes.length > 0) {
        processpaste(elem, savedcontent, label, len);
    }
    else {
        that = {
            e: elem,
            s: savedcontent
        }
        that.callself = function () {
            waitforpastedata(that.e, that.s, label, len)
        }
        setTimeout(that.callself, 20);
    }
}

function processpaste(textbox, savedcontent, label, len) {
    pasteddata = textbox.innerHTML;

    if (savedcontent.length > 0) {
        textbox.innerHTML = savedcontent + pasteddata ;
    }

    if (pasteddata.length > len) {
        textbox.value = textbox.value.substring(0, len);
        document.getElementById(label).className = "red-text";
        document.getElementById(label).innerHTML = 'You are trying to type too much information ';
    }
    else {
        document.getElementById(label).className = "grey-text";
        document.getElementById(label).innerHTML = textbox.value.length.toString() + ' of ' + len + ' chars';
    }
}

Answer №1

It's likely that HTML isn't displaying new lines as you anticipated. You can experiment with using <br> instead.

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

Capture information and store it in a database through the use of AJAX technology

I want to implement AJAX for real-time saving of user input comments directly to the database. Here is where users can input their comments: <div class="comment"> <form action="comment.php"> <textarea cols="35" name="comment ...

Accessing values from dynamic controls in asp.net within a FormView connected to a database entity field

In my aspx file, I have the code snippet below: <asp.DynamicControl ID="ArticleName" runat="server" DataField="Name" Mode="Edit"/> How can I retrieve the value of the DataField property in the DynamicControl from the code behind? For example, if th ...

What is the reason that when the allowfullscreen attribute of an iframe is set, it doesn't appear to be retained?

Within my code, I am configuring the allowfullscreen attribute for an iframe enclosed in SkyLight, which is a npm module designed for modal views in react.js <SkyLight dialogStyles={myBigGreenDialog} hideOnOverlayClicked ref="simpleDialog"> <if ...

Eliminate item from array if it is found in JSON data

I have implemented a script to eliminate JSON objects from an array that exist in both the array itself and another JSON object: var stageChildren = stage.sprites; for (var i = 0; i < stageChildren.length; i++) { for (var x in mainMenu) { if ...

Is it possible to assign variables inside an http call from a function in AngularJS?

Seeking urgent assistance. I need help with a function that resembles the following: $scope.getData = function(id) { $http.get('/url' + id).success(function (data) { return data.a.b.c; }); }; In another function, I have the fol ...

The headers set in jQuery's $.ajaxSetup will be used for every ajaxRequest, even if they

Below are the parameters set for all ajax calls in the <head> of my document. (This is necessary to fix an iOS ajax bug referenced at $.ajaxSetup ({ cache: false, headers: { "cache-control": "no-cache" } }); I am wo ...

unable to navigate to next or previous page in react-bootstrap-table2-paginator

I successfully implemented a table with pagination using react-bootstrap-table2-paginator. On each page number click, it calls an API to fetch the table data. However, I encountered issues with the next page, previous page, and last page buttons not workin ...

Retrieve Data using Raw SqlQuery in Entity Framework to Return Anonymous Type

Is there a way to make Entity Framework's SqlQuery method return an Anonymous type? Currently, when I execute a raw query using context.TheObject.SqlQuery(), the query involves joining two tables and I want to be able to access the results from both ...

Use Backbone.js to dynamically insert partial views based on specific routes, similar to how ng-view works in AngularJS

After gaining experience with AngularJs, I am now looking to dive into Backbone.js. However, I am struggling to understand how this library handles routes and partial views/templates "injection". In Angular, we can easily set up static components like th ...

How can I effectively develop a versatile user interface for a website using Ruby on Rails that is compatible with all

Currently, I am in the midst of developing a web application using Ruby on Rails. Occasionally, I encounter challenges with cross-browser compatibility when it comes to CSS and Javascript. Are there any strategies you recommend to reduce these issues dur ...

Creating a Unique Flot Bar Chart Experience

I am currently working on creating a bar chart and have the following requirements: Bar labels for each data point Centering the bars in the grid Below is my jQuery code snippet: var data = [[0,206],[1,118],[2,37]]; var dataset = [ { labe ...

Exploring the Dynamic Nature of JSON Deserialization

After receiving a Json response from a third-party API, I am faced with the following structure: Newtonsoft.Json.JsonConvert.DeserializeObject<MyModel>(response); I have been struggling to parse this data properly. I've tried using KeyValuePair ...

Could this configuration in my WCF be the reason for the 400 bad request?

My WCF application is hosted as a web role in Azure, but I am encountering a 400 Bad Request error when trying to access any of the three service wsdl in a browser or setting up a proxy. <?xml version="1.0"?> <configuration> <a ...

Having trouble importing d3.js and typescript in IntelliJ?

Encountering errors in browsers' console when utilizing d3.select() in typescript code. Despite trying alternative methods like d3-timer.now(), the issue persists. As a newcomer to typescript, I am utilizing intelliJ Ultimate 2019.1. Through npm, I h ...

There was an unhandled type error stating that "undefiened" is not a function while processing a JSON

Hey there! I'm currently using JSON to send a list of songs to populate my table. The JSON response is working fine up until the controller URL. However, when I attempt to loop through it and display the details in my table, I encounter an error. $( ...

Understanding how to read a JSON response when the dataType is specifically set to JSONP

I am attempting to send a JSONP request for cross-domain functionality. The issue is that my server does not support JSONP requests and interprets them as regular JSON, responding with an object: {result: 1} Below is the AJAX request I have made: jQuery. ...

Retrieving specific data from nested arrays in Vue.js

I am currently working on Vue.js template development and facing an issue with filtering nested data in a faq section. When I try to add a search bar, the nested data array returns all data without proper filtering. Dom <v-container> <v ...

Exploring the power of Knockout Js and Typeahead libraries

https://i.stack.imgur.com/38iZc.png Hello experts in Knockout and typeahead, I am receiving suggestions from the typeahead js as shown above. I have my data supplied in an array format var itemsRandom= ['Apple', 'Ball','Ape&apos ...

Issues have been encountered with the correct functioning of reactive form validation in Angular 6

I am seeking assistance with Angular 6 reactive form validation. I have done some research on the official Angular website. My goal is to validate my form and display different error messages for different errors. This is a snippet of my component code: ...

REACT Issue: Unable to Select Dropdown Option with OnChange Function

I have a component that includes a select element. Upon clicking an option, the OnProductChange function returns the value. However, my e.target.value shows as [Object Object]. Yet, {console.log(product)} displays: {id: 1, name: "VAM"} Clicking on Add L ...