JQuery Copy to Clipboard Example

How to copy span, div, or other HTML element contents to clipboard using JQuery

In this blog, I provide examples of code I have written or used over the years. With each post, I provide the ability for you the user to copy the code contents to the clipboard so you can paste it into your page. This handy copy to clipboard logic enables you to copy the contents of the code block without having to select it first. Just click the copy hyperlink and the script does the rest.

I particularly like the example below because I can use it in my blog post without having to embed script in the post itself. I simply load a script function in the head tag of my pages and provide a structured link in the post body that identifies the span (or pre tag in my blog) that I want to copy. The script selects the range of data in the span, highlights it, copies it to the clipboard, then alerts the user the copy has completed.

The script monitors for a click event on all elements on the page with a name=”copy_pre”. All of our copy links are named “copy_pre”. Each link has a unique ID that matches the ID of the span we want to copy.

The copy script:
Continue reading “JQuery Copy to Clipboard Example”

October 27, 2017November 7, 2017

JQuery Override Datepicker to Return Today’s Date Example

How to override the JQuery Datepicker to return today’s date

I support an ASP.net application that has multiple pages with fields that prompt for a date. All of our date input fields use the JQuery Datepicker calendar pop-up control to allow the user to select a date from the calendar.

The datepicker pop-up control can be defined to show several options (reference: JQuery Datepicker for details). One of those options is a button for today. When the today button is clicked the calendar control re-positions to the month containing today’s date. Many users wanted the today button to select and return today’s date to the date input field. This can be easily accomplished with a simple override.

Paste the following script in each page that loads the JQuery datepicker control, or better yet load it globally.
Continue reading “JQuery Override Datepicker to Return Today’s Date Example”

October 19, 2017May 3, 2022

JQuery Display Multiple Dialogs Example

How to display multiple JQuery dialogs on the same page

I recently started adding pop up help messages to my forms as online help text. These are handy for explaining to the user why the input is required, what is expected in the field and how the input should be formatted. But there are plenty of other areas where a dialog pop up could be useful. I use JQuery dialog because it is super simple and allows for an easy way to hide help text until it is needed.

Here is an simple example page with 3 simple paragraphs each with a separate help dialog popup. By giving each dialog a unique ID we can include as many dialog on the page as we need. In our example each dialog has the same style but you could have individual styles for each dialog.
Continue reading “JQuery Display Multiple Dialogs Example”