[JavaScript] mode window copy control text in read-only status

Source: Internet
Author: User

It is difficult to copy a mode window in read-only mode. You cannot select text or copy, edit, or right-click the browser menu. This article provides a solution to this problem:Use JavaScript scripts, select the control text, and then use Ctrl + C to copy.

I. Some methods to be used later:

/* Function: determines whether a string type parameter is used. Parameter: no call method: object. isstring () Note: (typeof (osource) = 'string') The String object generated by new string () cannot be correctly recognized */string. prototype. isstring = string. prototype. isstring | (function () {return ('[object string]' = object. prototype. tostring. call (this) ;});/* function: Get control text. */Function getcontroltext (osource) {return (osource. innertext | osource. value | ""); // osource. selectortext |}/* function: You can set the control to copy Note: After the selection, you can use Ctrl + C to copy! However, you cannot right-click the browser menu */function setcancopy (osource) {osource. contenteditable = true; osource. Disabled = false; // you may not need to modify it ?}

The method for determining whether a string is copied from Baidu open source JS library;The control text may not be taken into account in other cases.; Set the control contenteditable = true; not required, but it can make the operation of the selected control text more accurate (in the Text Selection Method fnselecttext). Specifically, double-click the control. The selected text is the text of the clicked control. If you do not set contenteditable to true, it is very likely that the first place where the same text appears on the same page is selected.

Ii. Save the original properties of the control

/* Save and restore on-site * // * temporary variable, used to save the original state of the control for text copying */var originstatus = originstatus ||{};/* function: save the original control status */function saveoriginstatus (osource) {// osource. disabled = 'Disabled '; // cannot be copied after being disabled // osource. readonly = true; // invalid. You can still copy originstatus. contenteditable = osource. contenteditable; originstatus. disabled = osource. disabled;}/* function: restore the original control status */function recoveroriginstatus (osource) {osource. contenteditable = originstatus. contenteditable; osource. disabled = originstatus. disabled ;}

3. left-click and hold it down for control Text Selection

/* Press and hold the left mouse button to select the control text */var isbound = false; document. attachevent ("onmousedown", function () {isbound = true ;}); document. attachevent ("onmouseup", function () {isbound = false ;});

The attachevent is used for event registration in the method, and non-ie is not taken into account.

4. Select the text of the control to be copied

/* Function: select the text of the control to be copied. Note: All the text of the control is selected inside the method, not part. */function fnselecttext (osource, e) {If (! Osource) return; E = E | window. event; E. returnvalue = false; // textarea uses its own selection function. note that textarea cannot be disabled if (osource. type = "textarea") return; // set it to editable to reduce the chance of selecting the first findtext method: saveoriginstatus (osource); setcancopy (osource ); vaR ssourcetext = getcontroltext (osource); var caretpos = ssourcetext. length; // text length if (caretpos = 0) return; If (osource. createTextRange) {var r = osource. createTextRange (); R. move ('character ', caretpos); R. select ();} else if (osource. setselectionrang) {osource. setselectionrange (caretpos, caretpos); osource. focus ();} else {// todo: Bug. If the page contains multiple identical texts, the first var r = Document will be selected. selection. createRange (); // or document. body. createTextRange (); R. findtext (ssourcetext); // The dynamically added content may cause an exception: htmlfile: cocould not complete the operation due to error 800a025e. r. select () ;}recoveroriginstatus (osource );}

Note: Inside the method, all text of the control is selected, not part of the control. Another bug is unsolved:If the page has multiple identical texts, the first one is selected..

5. Page event registration

// Double-click the control to select the text event document. attachevent ("ondblclick", function (e) {// The label control in the mode window does not belong to document. activeelement if (window. event. srcelement) {fnselecttext (window. event. srcelement, window. event | E) ;}}); // move the selected event document with the left mouse click. attachevent ("onmouseover", function (e) {If (!! Isbound) {If (window. event. srcelement) {fnselecttext (window. event. srcelement, window. event | E) ;}}}); // right-click the event // document. attachevent ("onmousedown", function (e) {// E = E | window. event; //// right-click // If (E. button = 2) {// var osource = Window. event. srcelement; // If (osource. type = "textarea") return; // else {//// press Ctrl and C to copy the text or press the left mouse button to drag the text to the rich text editor! // Alert ("press Ctrl and C at the same time to copy! "); // Window. event. cancelbubble = true; // E. returnvalue = false; //} // createcopytextarea (osource); // window. event. srcelement. contenteditable = true; //}); document. attachevent ("oncontextmenu", function (e) {var osource = Window. event. srcelement; If (osource. type = "textarea") return; else {alert ("press Ctrl and C at the same time to copy! ");}});

Registering an event to a document, rather than a control, is mainly because it is troublesome to register controls one by one if multiple controls exist on the page. This process also conforms to the user's habits. You can select the text with the left mouse click or double-click the selected text, and then press Ctrl + C to copy the text.

Vi. Usage

Assume that the script file name is copydataonmodalwindow. JS, the file storage path is "http://www.cnblogs.com/Scripts/js/CopyDataOnModalWindow.js", you can call the following:

<SCRIPT type = "text/JavaScript"> if(window.doc ument. readystate = "interactive") {If (! Window. opener) {// The Script var S = Document is referenced only in the mode window. createelement ('script'); S. src = "http://www.cnblogs.com/Scripts/js/CopyDataOnModalWindow.js"; S. type = "text/JavaScript"; too many Doc ument. getelementsbytagname ("head") [0]. appendchild (s);} else {}}</SCRIPT>

Note: I'm not sure! Window. opener must be a mode window. If you have a better method for judging the mode window, please leave a message.

This script is placed at the end of the page.

Summary and remaining issues

If the script is processed in this way, you do not need to pollute the page. You only need to copy the script call method.Unfortunately, the problem of abnormal operations on the clipboard in Javascript is not solved, and some details are not handled properly.

Note:

1. if the textarea control is not in the disabled status, even the readonly control can be selected and the right-click menu of the browser can be displayed, so textarea is excluded during processing. If it is in the disabled status, double-click and mouse-click events are not triggered,I haven't thought of any other solutions for the moment..

2. The text of the select control cannot be selected. However, an event can be triggered when the select control is disabled.

3. After selection, you cannot right-click to bring up the browser native menu. If it is a custom menu, it cannot be solved temporarily.An exception occurred when using JavaScript to operate the clipboard;

4. Details

BUG: select the control text. If the page contains multiple identical texts, the first one will be selected (of course, you can also copy it to the text)
BUG: select the control text, press the left mouse button in the selected area, and drag the text to other places before release. isbound is true at this time; or in some cases, right-click, moving the mouse will make the controls that move the mouse select text one by one. This is irrelevant, but it is not handled in depth.

---- End ----

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.