CODEWITHSUNDEEP
javascripthtml
Arvind
Arvind

Reputation: 15

How to paste a text line using js?

Well guys, i was just doing a simple stuff of executing system copy, delete etc. commands using execCommand method of js.

I have made two textareas and by hitting on the buttons i am executing copy, cut etc. commands.

Problems:

  1. In this the paste button is not working. Like i am copying some text from one textarea, it is not pasting into other textarea.

  2. Also I want to do select all for the textareas only. Like if cursor is on textarea1 and if I am hitting on selectAll button it should only select the textarea1 content. Currently it is selecting the whole page content.

Code:

  <script language="javascript">
    function doCopy()
   {
        document.execCommand('Copy',false,0);
   }
   function doPaste()
   {
        document.execCommand('Paste');
   }
   function doCut()
   {
        document.execCommand('Cut',false,0);
   }
   function doSelectAll()
   {
        document.execCommand('SelectAll',false,0);
    }
  function doDelete()
   {
        document.execCommand('Delete',false,0);
   }
    function doUndo()
    {
        document.execCommand('Undo',false,0);
    }
    function doUnselect()
    {
        document.execCommand('Unselect',false,0);
    }
  </script>
 </head>
<body>
<div align="center">
  input values : ---- <br>
 <textarea align="left" id="txtArea" name="txtArea" style="width:300px;         height:50px"></textarea>
 <br>
  <input type="button" id="btnCopy" name="btnCopy" value=" Copy " onclick="doCopy()" />
  <input type="button" id="btnCut" name="btnCut" value=" Cut " onclick="doCut()" />
  <input type="button" id="btnSelectAll" name="btnSelectAll" value=" Select All " onclick="doSelectAll()" />
  <input type="button" id="btnPaste" name="btnPaste" value=" Paste " onclick="doPaste()" />
  <input type="button" id="btnDelete" name="btnDelete" value=" Delete " onclick="doDelete()" />
 <input type="button" id="btnUndo" name="btnUndo" value=" Undo " onclick="doUndo()" />
 <input type="button" id="btnUnselect" name="btnUnselect" value=" Undo " onclick="doUnselect()" />
  <br>
  Manipulate <br>
  <textarea align="left" id="txtArea1" onpaste="alert('yes');" name="txtArea1" style="width:300px;height:70px" ></textarea>
   </div>

I am doing this for IE9.

Upvotes: 0

Views: 2222

Answers (1)

user669677
user669677

Reputation:

I had to make major changes I hope it will be OK for you. This solution requires jquery. I have tested it with Chrome and Firefox but I dont have IE9.

    var copy = "";
    var focused_field = null;
    $("#btnCopy").click(function(){
        //set copy variable to the selected text
        txtArea = document.getElementById("txtArea");
        var start = txtArea.selectionStart;
        var end = txtArea.selectionEnd;
        copy =  $(txtArea).val().substring(start, end);
    });
    $("#btnCut").click(function(){
        //set copy variable to the selected text and cuts it
        txtArea = document.getElementById("txtArea");
        var start = txtArea.selectionStart;
        var end = txtArea.selectionEnd;
        copy =  $(txtArea).val().substring(start, end);
        $(txtArea).val(
            $(txtArea).val().substring(0,start)+
            $(txtArea).val().substring(end)
        );
    });
   $("textarea").focus(function(){focused_field = $(this);});
    $("#btnSelectAll").click(function(){
        //select all in focused field
        if(focused_field)
            focused_field.select();
    });
    $("#btnPaste").click(function(){
        //paste copyed text to manipulate field
        txtArea1 = document.getElementById("txtArea1");
        $(txtArea1).val($(txtArea1).val()+copy);
    });

Here is the example.

Upvotes: 2

Related Questions