Compare User's Input To A Specifed Text String - jFieldCompareString

jFieldCompareString is a small and fast jQuery plugin that detects if the value of an input or textarea matches the text string you specify.

Features:

• Custom feedback (error/incomplete/success) messages.
• Allows you to prevent copy-paste and drag'n'drop.

How to use it:

1. Load the jQuery jFieldCompareString plugin's files in the document.

<link rel="stylesheet" href="dist/css/jquery.jFieldCompareString.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="dist/js/jquery.jFieldCompareString.js"></script>

2. Add the reference text to the jfcs-reference container.

<div class="jfcs-wrapper">
  <div class="jfcs-reference">
    I Love jQueryScript.Net
  </div>
</div>

3. Add an input field or textarea element next to the jfcs-reference container.

<div class="jfcs-wrapper">
  <div class="jfcs-reference">
    I Love jQueryScript.Net
  </div>
  <div class="jfcs-field">
    <input type="text" id="example" />
  </div>
</div>

4. Initialize the plugin on the text field and done.

$(function() {
  $('#example').jFieldCompareString();
});

5. Determine whether to prevent copy-paste and drag'n'drop. Default: false.

$(function() {
  $('#example').jFieldCompareString({
    field_protection: true,
  });
});

6. Customize the feedback messages.

$(function() {
  $('#example').jFieldCompareString({
    msg_notok: 'Your transcript has an error, please correct.',
    msg_incomplete: 'Your transcript is incomplete, please correct.',
    msg_ok: 'Your transcript is correct.'
  });
});

---

This awesome jQuery plugin is developed by lluz. For more Advanced Usages, please check the demo page or visit the official website.