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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 17
  1. #1
    New Coder
    Join Date
    Oct 2010
    Posts
    50
    Thanks
    31
    Thanked 1 Time in 1 Post

    Search Box - have text disappear when cursor placed inside

    Hello,

    I have the following code for a Search Box to search our library's catalog:
    [CODE]
    <form method="get" id="searchForm" action="http://jkpl.ent.sirsi.net/client/embedded.search/default" >
    <input type="hidden" name="ln" value="en_US" />
    <input id="q" title"Search For:" maxlength="256" name="q" value="Search Library Catalog" type="text" accesskey="s" />
    <input value="Search" id="searchButton" class="button" title="Search" type="submit" />
    </form>
    [ICODE]

    How do I get the Search the Catalog text inside the search box to disappear when someone places their cursor there?

    I tried adding this and it didn't work:
    [CODE] onfocus="clearText('Search Library Catalog','catSearch','query')" onblur="refillText('Search Library Catalog','catSearch','query')" [ICODE]

    I'd appreciate any help. Thank you, Elbee

  2. Users who have thanked Elbee for this post:

    Arbitrator (03-09-2013)

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,592
    Thanks
    0
    Thanked 645 Times in 635 Posts
    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.

  • Users who have thanked felgall for this post:

    Elbee (03-08-2013)

  • #3
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts
    Quote Originally Posted by Elbee View Post
    I tried adding this and it didn't work:
    [CODE] onfocus="clearText('Search Library Catalog','catSearch','query')" onblur="refillText('Search Library Catalog','catSearch','query')" [ICODE]

    I'd appreciate any help. Thank you, Elbee
    That will only work if you have two functions (clearText() and refillText()) in your script tags. I can only assume (since it didn't work) that you don't have those functions in your JavaScript. If they ARE there, then it's another matter, entirely.

    EDIT: What do you mean by "it didn't work"?
    ^_^

    If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
    *
    The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".

  • Users who have thanked WolfShade for this post:

    Elbee (03-08-2013)

  • #4
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,277
    Thanks
    10
    Thanked 581 Times in 562 Posts
    here's a way to do it without javascript:

    Code:
    <style>
    :focus::-webkit-input-placeholder { color:transparent; }
    :focus::-moz-placeholder { color:transparent; } /* firefox 19+ */
    :focus:-ms-input-placeholder { color:transparent; } /* ie */
    input:focus:-moz-placeholder { color:transparent; }
    </style>
    
    <input placeholder="Search the Catalog"
    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%

  • Users who have thanked rnd me for this post:

    Elbee (03-08-2013)

  • #5
    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 Elbee View Post
    How do I get the Search the Catalog text inside the search box to disappear when someone places their cursor there?
    Start by fixing syntax errors in your code; title"Search For:" not a valid attribute specification.

    Then you can use an HTML5 solution:

    Code:
    <input id="q" placeholder="Search Library Catalog">
    If you want JavaScript-based fallback, the following code shows how to do that:

    Code:
    <!doctype html>
    <html lang="en-US">
    	<head>
    		<title>Demo Document</title>
    	</head>
    	<body>
    		<input id="q" placeholder="Search Library Catalog">
    		<script>
    			if (typeof document.getElementById("q").placeholder === "undefined") {
    				var input_element = document.getElementById("q");
    				var placeholder_text = "Search Library Catalog";
    				input_element.value = placeholder_text;
    				if (typeof input_element.addEventListener === "function") {
    					input_element.addEventListener("focus", function () {
    						if (input_element.value === placeholder_text) {
    							input_element.value = "";
    						}
    					}, false);
    					input_element.addEventListener("blur", function () {
    						if (input_element.value === "") {
    							input_element.value = placeholder_text;
    						}
    					}, false);
    				}
    				else if (typeof input_element.attachEvent === "object") {
    					input_element.attachEvent("onfocus", function () {
    						if (input_element.value === placeholder_text) {
    							input_element.value = "";
    						}
    					});
    					input_element.attachEvent("onblur", function () {
    						if (input_element.value === "") {
    							input_element.value = placeholder_text;
    						}
    					});
    				}
    			}
    		</script>
    	</body>
    </html>
    Last edited by Arbitrator; 03-07-2013 at 11:50 PM. Reason: I corrected an error in the code.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • The Following 2 Users Say Thank You to Arbitrator For This Useful Post:

    Elbee (03-08-2013), Moon55555 (03-09-2013)

  • #6
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,898
    Thanks
    203
    Thanked 2,530 Times in 2,508 Posts
    How do I get the Search the Catalog text inside the search box to disappear when someone places their cursor there?

    Does the OP not just want

    Code:
    <input type = "text" name = "q" id = "q" size = "100"  maxlength="256" value = "Search Library Catalog: "  onclick = "if (this.value == 'Search Library Catalog: ') this.value = '';"  onblur = "if (this.value == '') this.value = 'Search Library Catalog: ';" />
    or have I misunderstood the question?

    If you wanted multiple fields you could do:-

    Code:
    <body onload = "clearRestore('field1', 'field2', 'field3', 'field4')">
    
    <input type = "text" name= "field1" id = "field1" size = "40" value = "Default text for FIELD 1"><br><br>
    <input type = "text" name= "field2" id = "field2" size = "40" value = "Default text for FIELD 2"><br><br>
    <input type = "text" name= "field3" id = "field3" size = "40" value = "Default text for FIELD 3"><br><br>
    <input type = "text" name= "field4" id = "field4" size = "40" value = "Default text for FIELD 4"><br><br>
    
    
    <script type="text/javascript">
    
    function clearRestore() {
    var len = arguments.length;
    var elem;
    for (var i = 0; i < len; i++)  {
    if ((elem = document.getElementById(arguments[i])))  {
    elem.onfocus = function()  {
    if (this.value == this.defaultValue) {this.value = ""}
    }
    elem.onblur = function() {
    if (!/\S/.test(this.value)) {this.value = this.defaultValue}
    }
    }
    }
    
    }
    </script>
    
    </body>
    There is no point in coding for HTML5 when only a minority of desktop browsers actually in use support it. In any case, there is no point. Vanilla Javascript can do the job entirely adequately. I find that is true with quite a few "advanced" features. Maybe nice to have, but mostly unnecessary. Especially if you have to include "fallback" code as well. Reminds me of the politician's motto - "Never use 10 words when 100 will do".


    "In the beginner's mind there are many possibilities, but in the expert's mind there are few” - Shunryu Suzuki (Japanese Zen priest, ?-1971)
    Last edited by Philip M; 03-08-2013 at 08:48 AM.

    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.

  • Users who have thanked Philip M for this post:

    Elbee (03-08-2013)

  • #7
    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 Philip M View Post
    Code:
    <input type = "text" name = "q" id = "q" size = "100"  maxlength="256" value = "Search Library Catalog: "  onclick = "if (this.value == 'Search Library Catalog: ') this.value = '';"  onblur = "if (this.value == '') this.value = 'Search Library Catalog: ';" />
    It makes more sense to listen on the focus event; the click event does not accommodate keyboard-based focus of the element.

    Quote Originally Posted by Philip M View Post
    There is no point in coding for HTML5 when few desktop browsers actually in use support it.
    I made the assumption otherwise based on http://caniuse.com/input-placeholder which indicates decent support. Internet Explorer, as usual, lags behind the rest of the pack.

    Quote Originally Posted by Philip M View Post
    There is no point in coding for HTML5 when only a minority of desktop browsers actually in use support it. In any case, there is no point. Vanilla Javascript can do the job entirely adequately. I find that is true with quite a few "advanced" features. Maybe nice to have, but mostly unnecessary. Especially if you have to include "fallback" code as well. Reminds me of the politician's motto - "Never use 10 words when 100 will do".
    Indeed. So can vanilla HTML for that matter. I say the OP should use a label element and discard the JavaScript entirely. The whole placeholder thing is just fluff really. Why code like a politician?
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • Users who have thanked Arbitrator for this post:

    Elbee (03-08-2013)

  • #8
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,898
    Thanks
    203
    Thanked 2,530 Times in 2,508 Posts
    Quote Originally Posted by Arbitrator View Post
    It makes more sense to listen on the focus event; the click event does not accommodate keyboard-based focus of the element.
    Yes, agreed. That is an improvement.

    I made the assumption otherwise based on http://caniuse.com/input-placeholder which indicates decent support. Internet Explorer, as usual, lags behind the rest of the pack.
    I said "desktop browsers in use", not browsers which have recently become available in more up-to-date versions. I have the idea that existing users are often slow to upgrade.

    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.

  • Users who have thanked Philip M for this post:

    Elbee (03-08-2013)

  • #9
    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 Philip M View Post
    I said "desktop browsers in use", not browsers which have recently become available in more up-to-date versions. I have the idea that existing users are often slow to upgrade.
    And I had another idea: the numbers looked pretty good anyway. Chrome, Firefox, Opera, and Safari all show support in the current iteration and five or more major iterations back.

    If you want people to limit their code to features with strong Internet Explorer support, just come out and say so instead of talking about all this "desktop browsers in use" mumbo jumbo. I'm well aware that IE10 is only available on Windows 7/8 and that IE10 for Windows 7 is only recently released, hence the fallback code (which is mostly relevant for that one browser). I'm not going to wait until IE12 is out to suggest use of HTML5's placeholder attribute.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • The Following 2 Users Say Thank You to Arbitrator For This Useful Post:

    Elbee (03-08-2013), Moon55555 (03-09-2013)

  • #10
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,898
    Thanks
    203
    Thanked 2,530 Times in 2,508 Posts
    The code I posted in #6 works in all browsers. Why use something that does not, or something that requires "fallback code"?

    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.

  • Users who have thanked Philip M for this post:

    Elbee (03-08-2013)

  • #11
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,898
    Thanks
    203
    Thanked 2,530 Times in 2,508 Posts
    Keep this argument going please - the OP generously awards us a "Thanks" for each post!

    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.

  • #12
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,277
    Thanks
    10
    Thanked 581 Times in 562 Posts
    you can use css's :before and :after to hit the placeholder attrib on an input that doesn't support putting the text in the input itself. With a little negative padding and some positioning, you can probably make it look identical to real browsers.

    there's no reason not to use html5 right now, its got much better semantics, even if you don't use the JS features. People wanted to write clean semantic html before 5 even came out, now we don't have to use title or data-default because placeholder is spec'd.

    I'm not saying just drop <input type=date> into your mission-critical app this afternoon, but the new tag semantics work in netscape4 and it's better to code proactively instead of retroactively.
    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%

  • #13
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,898
    Thanks
    203
    Thanked 2,530 Times in 2,508 Posts
    As we so often say, there is more than one way to skin a cat. I do realise that the HTML5 features you refer to degrade in older browsers. But of course they do not actually work.

    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.

  • #14
    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 Philip M View Post
    The code I posted in #6 works in all browsers. Why use something that does not, or something that requires "fallback code"?
    Both of our solutions use scripts and my "fallback code" is functionally equivalent to your script aside from the two-line conditional check for placeholder attribute support and the HTML5 attribute itself, so I don't see what's particularly offensive about use of the attribute.

    Granted, my script is substantially more verbose, but that's a mere matter of taste. I prefer readable, indented code and the DOM event model because there are no issues with events being overwritten. For consistency's sake, I use that model over the HTML5 (formerly "DOM0") event model and inline, attribute-based events when possible. To each their own, I guess.

    It's also worth noting that the functionality of the placeholder attribute as found in Chrome 26 and Firefox 19 is not exactly replicated by either of our scripts. In Chrome and Firefox, the placeholder text remains in the box even after focus and cannot be selected, thereby allowing the user to continue to read the placeholder before they begin typing without it being accidentally modified as a value. In those two browsers as well as IE10 and Opera 12.1, the text is also grayed out indicating that it isn't a value. While I'm sure these behaviors could be replicated through script, to me, it's just easier to use the attribute with an inferior fallback.

    Quote Originally Posted by Philip M View Post
    Keep this argument going please - the OP generously awards us a "Thanks" for each post!
    While it's always a pleasure crossing swords with you, Philip, I think I'm going to bow out short of another inquiry from the OP.

    I thanked Elbee for his generosity.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #15
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,898
    Thanks
    203
    Thanked 2,530 Times in 2,508 Posts
    Quote Originally Posted by Arbitrator View Post
    Granted, my script is substantially more verbose, but that's a mere matter of taste.
    Well, only up to a point, Lord Copper. Verbosity is often criticised in these forums. Some gurus go through contortions to save half-a-dozen bytes (as though that mattered in the slightest), yet in other situations resolutely refuse to use 10 lines of code where 100 will do.

    In those two browsers as well as IE10 and Opera 12.1, the text is also grayed out indicating that it isn't a value.
    A good example of a bell/whistle which does not really add anything significant to the ux (as rnd me calls it). IMO. We could still live without it.
    Last edited by Philip M; 03-09-2013 at 09:00 AM.

    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.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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