Identifying copy and paste behavior within an HTML form using .NET CORE MVC 2.1

Question

Identifying copy and paste behavior within an HTML form using .NET CORE MVC 2.1

I inherited a project at my current company and one of the tasks involves allowing users to paste multiple ISBN numbers from Excel into a search field on my Index page (HTML). Sometimes, the ISBNs are poorly formatted with letters or special symbols mixed in for some unknown reason.

The input might look something like this:

3356565663541 3356565663541 3356565663541 3356B565663541 3356565663541A

Currently, the code on my index page for the input form is as follows:

<div class="col-lg-4">
  <div class="form-group>
    <label>ISBN</label>
    <input asp-for="Advanced_ISBN" id="ISBN" type="text" placeholder="" class="form-control">
  </div>
</div>

I now need to find a way to analyze the pasted text in the textbox and alert the user if there are any errors. I would prefer to do this using C#, but I'm not sure how to proceed.

Detect when the user pastes text into the textbox using ctrl-v or right-click and paste;
Retrieve the pasted string to analyze it;
Show the analyzed text in a new temporary window highlighting any lines that may contain errors.

Once presented with the highlighted text, users can either confirm everything is correct by pressing OK or identify and address any lines that are incorrect.

html asp.net-core .net-core asp.net-core-mvc

Answer 1

Answer №1

Utilize the input event handler to trigger actions on typing and pasting.

jQuery:

$("ISBN").on("input",function() {});

plain JS:

document.getElementById("ISBN").addEventListener("input",function() {});

function validateISBN (isbn) { // from https://neilang.com/articles/how-to-check-if-an-isbn-is-valid-in-javascript/
  isbn = isbn.replace(/[^\dX]/gi, '');
  if(isbn.length != 10){
    return false;
  }
  var characters = isbn.split('');
  if(characters[9].toUpperCase() == 'X'){
    characters[9] = 10;
  }
  var sum = 0;
  for (var i = 0; i < characters.length; i++) {
    sum += ((10-i) * parseInt(characters[i]));
  };
  return ((sum % 11) == 0);
}

document.getElementById("ISBN").addEventListener("input",function() {
  this.value.split(" ").forEach(function(val) {
    if(val.trim()) console.log(val,validateISBN(val));
  });
});

A valid ISBN would be 0-85131-041-9

<div class="col-lg-4">
  <div class="form-group">
    <label>ISBN</label>
    <input asp-for="Advanced_ISBN" id="ISBN" type="text" placeholder="" class="form-control">
  </div>
</div>

If you prefer processing it server-side with jQuery, follow these steps:

$("#ISBN").on("input",function() {
  $.post("yourcsharpprocess",{ data : this.value },function(data) {
    $("#result").html(data);
  });
});

Answer 2

Utilize the input event handler to trigger actions on typing and pasting.

jQuery:

$("ISBN").on("input",function() {});

plain JS:

document.getElementById("ISBN").addEventListener("input",function() {});

function validateISBN (isbn) { // from https://neilang.com/articles/how-to-check-if-an-isbn-is-valid-in-javascript/
  isbn = isbn.replace(/[^\dX]/gi, '');
  if(isbn.length != 10){
    return false;
  }
  var characters = isbn.split('');
  if(characters[9].toUpperCase() == 'X'){
    characters[9] = 10;
  }
  var sum = 0;
  for (var i = 0; i < characters.length; i++) {
    sum += ((10-i) * parseInt(characters[i]));
  };
  return ((sum % 11) == 0);
}

document.getElementById("ISBN").addEventListener("input",function() {
  this.value.split(" ").forEach(function(val) {
    if(val.trim()) console.log(val,validateISBN(val));
  });
});

A valid ISBN would be 0-85131-041-9

<div class="col-lg-4">
  <div class="form-group">
    <label>ISBN</label>
    <input asp-for="Advanced_ISBN" id="ISBN" type="text" placeholder="" class="form-control">
  </div>
</div>

If you prefer processing it server-side with jQuery, follow these steps:

$("#ISBN").on("input",function() {
  $.post("yourcsharpprocess",{ data : this.value },function(data) {
    $("#result").html(data);
  });
});

Identifying copy and paste behavior within an HTML form using .NET CORE MVC 2.1

Answer №1

Similar questions

What is the best way to ensure jQuery runs as soon as the page loads?

Is it possible to change the inner html to null during an active ajax request?

Using tabs within a Dialog prevents the Dialog from adjusting its height automatically

dirpagination fails to display all rows in the dataset

Tips for refreshing retrieved data from the server upon page creation in Vue.JS

Exploring the power of AngularJS through nested directives

Clicking to remove added child element

Adding dynamic elements to a pop-up window with the use of jQuery's .load() function

What types of events can be used to trigger the start of HTML5 audio playback in mobile Chrome?

Enhance your browsing experience by inputting valuable information into the

Persistent pseudo-element problem across all iterations of Internet Explorer

Guide to create a sliding menu transition from the viewport to the header

Display HTML element within the <samp> tag using PHP

Sharing a codepen.io project on a GitHub page

Setting the parent's height to match one of its children

I'm having trouble with Material Design Slide Toggle as it lacks event.StopPropagation functionality. Any suggestions on what alternative I

Redirect the Submit button to the specified URL from the form element

What is the main purpose of using the CSS transform:translate() property?

Showing local storage on a webpage using Jquery

What is the most efficient way to send various props to multiple child components within a React parent component?