[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Controlling "Paste" function using JQuery

Posted on 2012-09-21
3
Medium Priority
?
305 Views
Last Modified: 2012-09-24
I have an application where the user cannot edit the fields on a form.  The values are "copied" and "pasted" from another application.  To prevent the user from editing these values the fields are set to readonly.  Using JQuery I can turn remove the "readonly" attribute making the field "editable".  Also using JQuery I can capture the <CTRL>V.  However what isn't happening is the actual pasting.  Can someone review my code and recommend changes that will allow this to work?  Any help is greatly appreciated!

<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--  INCLUDES FOR JQUERY -->
<script type="text/javascript" src="/libs/jquery/jquery-1.7.2.min.js"></script>
<script type='text/javascript'>//<![CDATA[
 
$(document).ready(function()
{
      var ctrlDown = false;
      var pasteFlag = false;
      var ctrlKey = 17, vKey = 86;
     
      $(document).keydown(function(e)
      {
                  if (e.keyCode == ctrlKey) { $("div").append("  Ctrl pressed down!"); ctrlDown = true; }
            if(e.target.id&&e.target.id=="textbox") $("div").append(" on textbox");              
            if (e.keyCode == vKey && ctrlDown) { $("div").append("  V pressed down!"); pasteFlag = true; }
      }).keyup(function(e)
      {
            if (e.keyCode == ctrlKey) { $("div").append("  Ctrl realeased!"); ctrlDown = false; pasteFlag = false; }
            if(e.target.id&&e.target.id=="textbox") $("div").append(" on textbox");              
            if (e.keyCode == vKey) $("div").append("  V released!");
      });
     
      $('.no-edit').keydown(function(e)
      {
                  if (pasteFlag) {
                        $('#textbox').removeAttr('readonly');
                  } else {
                        $('#textbox').attr('readonly', 'read-only');
                  }
        });
});
//]]>  
 
</script>
<title>JQuery Test</title>
</head>

<body>
<div></div>
<form name="test" method="post" action="test.asp" target="_self">
      <input name="textbox" id="textbox" size="129"  class="no-edit" readonly="read-only" /><br />
      <input name="textbox2" id="textbox2" size="129" readonly="read-only" />
      <input name="submit" id="submit" type="submit" value="Submit" />
</form>
</body>
</html>
0
Comment
Question by:dyarosh
  • 2
3 Comments
 

Author Comment

by:dyarosh
ID: 38423102
Note:  Currently the users can edit the form which is the problem.  We need to remove that ability and allow only pasting of data which is retrieved from another system.  We actually have a program that "scrapes" the data from the other system and "pastes" the data onto the form.  Didn't want you to think the user was going to have to do the pasting manually.
0
 
LVL 83

Accepted Solution

by:
leakim971 earned 1500 total points
ID: 38424554
0
 

Author Closing Comment

by:dyarosh
ID: 38428998
Using your links I was able to get what I needed.  Here is my final cut.  Ultimately it would be nice if I could come up with a "generic" way to indicate which fields accepted the "Paste" function but no keyboard input but I couldn't get the class selector to work so I will just hard code it for each field as shown below.  Thanks for the help!

$(document).ready(function()
{
      var ctrlDown = false;
      var pasteFlag = false;
      var ctrlKey = 17, vKey = 86;
      $('#Coverage1').keydown(function(e)
      {
            if (e.keyCode == ctrlKey) ctrlDown = true;
            if (e.keyCode == vKey && ctrlDown) pasteFlag = true;
            if (pasteFlag) return true; else return false;
      }).keyup(function(e)
      {
            if (e.keyCode == ctrlKey) {
                  ctrlDown = false;
                  pasteFlag = false;
                  return true;
            } else {
                  return false;
            }
      });
});
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

What is a Lightbox? A Lightbox is the effect you see when you click, for example, an image and the screen fades out and up pops the same image but in its full size dimensions. There are lots of Lightbox effects for jQuery. Problem is they are a…
Requirements JQuery 1.6+ HTML CSS Introduction This article was inspired by an EE question (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28372511.html) on how to make a page show some balloons animate up a page…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses
Course of the Month19 days, 14 hours left to enroll

873 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question