Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    New Coder
    Join Date
    Jul 2011
    Posts
    16
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Textbox with automatic selection of text in order to copy to clipboard

    Hello folks,

    I'm looking for a textbox that has got the option to prestore text inside it. The text would be already in it when I open it. It needs to store some of my PHP for my practice and HTML or any code. My idea behind this is to use it for my scripts that I practice. I select the textbox and I copy the text to my clipboard. The text should be selected automatically when I click the textbox. I'm looking already for a long time for this so if someone could help me it would be very appriciated. I found a small demo here of how it would need to look like: http://jsfiddle.net/NNqyF/ However it needs the option to store multiple lines of text with tags.

    If I'm not clear enough I would like to explain it more clear.

    Thanks in advance for any help!

    grid

  • #2
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,296
    Thanks
    10
    Thanked 584 Times in 565 Posts
    Code:
    <textarea rows=10 cols=80 onfocus=this.select() ></textarea>
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #3
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,917
    Thanks
    56
    Thanked 545 Times in 542 Posts

    there's always one...

    Code:
    onfocus=this.select()
    for some reason chrome doesn't like this (it selects, then deselects the text right away)
    doesn't seem to have a problem with
    Code:
    onclick=this.select()
    though

  • #4
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,296
    Thanks
    10
    Thanked 584 Times in 565 Posts
    Quote Originally Posted by xelawho View Post
    Code:
    onfocus=this.select()
    for some reason chrome doesn't like this (it selects, then deselects the text right away)
    doesn't seem to have a problem with
    Code:
    onclick=this.select()
    though
    yeah, but i hate how that version prevents sub-selections.


    Code:
    onfocus="setTimeout(this.select.bind(this), 250);"
    which should allow almost any click to expire and allow sub-selections. Of course, you'll have to bring your own this.bind to five-year-old browsers, if that matters.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #5
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,092
    Thanks
    23
    Thanked 594 Times in 593 Posts
    @grid_, maybe you should look at editors with "code snippets" or ""code snippet manager".
    Notepad++ has one - Sublime Text has one.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #6
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,037
    Thanks
    0
    Thanked 250 Times in 246 Posts
    Quote Originally Posted by xelawho View Post
    doesn't seem to have a problem with
    Code:
    onclick=this.select()
    though
    But that will not work if you use tab to focus the textarea.

  • #7
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,620
    Thanks
    0
    Thanked 645 Times in 635 Posts
    Whichever JavaScript you use to select the text in the textarea should be in a separate JavaScript file and not jumbled with the HTML. That way it will work properly in all browsers.

    There are HTTP security headers that can help prevent code injection by blocking ALL inline JavaScript - by making sure you keep your script separate you have the option to implement that security.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #8
    New Coder
    Join Date
    Jul 2011
    Posts
    16
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Hello,

    First of all thanks for so much reply's! It really helped me out.
    The final solution is what I found here:

    http://www.plus2net.com/javascript_t...ea-onclick.php

    Have a nice day,

    grid

  • #9
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,296
    Thanks
    10
    Thanked 584 Times in 565 Posts
    Quote Originally Posted by grid_ View Post
    Hello,

    First of all thanks for so much reply's! It really helped me out.
    The final solution is what I found here:

    http://www.plus2net.com/javascript_t...ea-onclick.php
    going with an eval-based solution huh? nice of you to ask us and then do something else entirely that you could have without asking anyone.
    I like the camel-case on the hard-coded event too; makes me nostalgic for 2002...
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #10
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,037
    Thanks
    0
    Thanked 250 Times in 246 Posts
    I agree with rnd_me. I looked into the tutorials at plus2net and I also saw <table> tags for layout and <font> tags and other tag soup style markup. I recommend to stay away from that site if you want to learn modern web programming.

  • #11
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,620
    Thanks
    0
    Thanked 645 Times in 635 Posts
    Quote Originally Posted by rnd me View Post
    I like the camel-case on the hard-coded event too; makes me nostalgic for 2002...
    Were you still using that in 2002?

    It had been obsolete for five years by then. I didn't start creating web pages until 2000 so I completely missed the camelcase era - at least in so far as the pages that I have ever created.
    Last edited by felgall; 02-14-2014 at 11:40 PM.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #12
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    Quote Originally Posted by grid_ View Post
    I'm looking for a textbox that has got the option to prestore text inside it.
    Quote Originally Posted by felgall View Post
    Whichever JavaScript you use to select the text in the textarea should be in a separate JavaScript file and not jumbled with the HTML.
    Here's code that does that:

    Code:
    <textarea id="code"><p>This is code.</p></textarea>
    <script>
    	(function () {
    		"use strict";
    		var codeTextField = document.getElementById("code");
    		// codeTextField.addEventListener("focus", codeTextField.select); // Doesn’t work in Blink‐based browsers such as Google Chrome and Opera.
    		codeTextField.addEventListener("focus", setTimeout.bind(window, codeTextField.select.bind(codeTextField), 100));
    	})();
    </script>
    I don't understand why browsers require that the setTimeout method have its this object set to null or window (or just window in IE9) or the select method have its this object set to the owner element, but they do, which made the above code slightly more complicated.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #13
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,296
    Thanks
    10
    Thanked 584 Times in 565 Posts
    Quote Originally Posted by felgall View Post
    Were you still using that in 2002?

    It had been obsolete for five years by then. I didn't start creating web pages until 2000 so I completely missed the camelcase era - at least in so far as the pages that I have ever created.
    of course i did, that's how front page did!
    you wouldn't want to go against the leader now would you?

    my big browser tip back then was disabling javascript: it makes your browser faster and cuts down on ads!
    my big webdev tip back then was don't use CSS: it doesn't work in older browsers, but <center> works everywhere!

    also check your math: 2002-1999!=5. and it was late in 1999 if i recall correctly, so really then were; talking about 2-3 years.

    And why would you roll out html4 right away but trash talk html5 for years? Oh, lemme guess, html5 is not a standard yet. just kidding.

    it's funny/sad how 4 only took a year and a half and 5 is on it's sixth year as a candidate...
    Last edited by rnd me; 02-15-2014 at 02:20 AM.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #14
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,918
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Quote Originally Posted by rnd me View Post
    but <center> works everywhere!
    IMO it is a great pity that <centre> was deprecated.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •