SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Evangelist Dave Morton's Avatar
    Join Date
    Sep 2003
    Location
    Carson City, NV
    Posts
    557
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Placing the cursor precicely within a text box

    I'm working on an ajax driven chat room (you can see the "proof of concept" at http://www.geekcavecreations.com/pChat/), and I'm currently working on a function to add color symbols to the chat textbox; the function I have follows:

    Code:
      function addColor(color) {
        var chatText = document.getElementById("chatText");
        var colorStartTag = "[" + color + "]";
        var colorEndTag = "[/" + color + "]";
        var begin = (chatText.value).substring(0, chatText.selectionStart);
        var middle = (chatText.value).substring(chatText.selectionStart, chatText.selectionEnd);
        var end = (chatText.value).substring(chatText.selectionEnd);
        var text = begin + colorStartTag + middle + colorEndTag + end;
        chatText.value = text;
        chatText.focus();
      }
    As written, this function works just great. however, I wish to add the further feature of placing the cursor between the symbols, if the "middle" variable is empty. Truth be told, I'm not even certain if this is possible. But if it is, I'd like to learn how to go about it. Any suggestions?
    Making a difference, one little psychotic episode at a time
    Geek Cave Creations
    Beta testers needed for pChat
    Dave's Gallery

  2. #2
    SitePoint Evangelist Dave Morton's Avatar
    Join Date
    Sep 2003
    Location
    Carson City, NV
    Posts
    557
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    oops! I spoke too soon. I guess I'll have to re-formulate the function, as it fails in IE. Drat.

    the question still stands, however.
    Making a difference, one little psychotic episode at a time
    Geek Cave Creations
    Beta testers needed for pChat
    Dave's Gallery

  3. #3
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,862
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    It definitely isn't possible in all browsers and attempting to implement it in any may make the field totally unusable in some browsers.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  4. #4
    SitePoint Evangelist Dave Morton's Avatar
    Join Date
    Sep 2003
    Location
    Carson City, NV
    Posts
    557
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, it may not work in all browsers, but the function I came up with works in Firefox 3.5, IE8, Chrome 3.0, Opera 10.1 and Safari 4.0 (all Win32, of course). It's split in 2 sections, because I needed to set an onMouseUp handler to make it work. first, the onMouseup handler, within my onload function:

    Code:
        chatText = document.getElementById("chatText"); // The text box for the chat bar
        chatText.onmouseup = function() {
          if (document.selection.createRange) { // This handles IE from 4 on up
            data.selectedText = document.selection.createRange().text;
          }
          else if (document.selectionStart) { // Mozilla & NS, also from 4 up
            data.selectedText = (chatText.value).substring(chatText.selectionStart, chatText.selectionEnd);
          }
          else if(window.getSelection) {  // Chrome and Safari use this
            data.selectedText = window.getSelection();
          }
          else data.selectedText = "";  // Degrade gracefully
        }
    Now, the actual function:

    Code:
      function addColor(color) {
        var colorStartTag = "[" + color + "]";
        var colorEndTag = "[/" + color + "]";
        if(data.selectedText !== "") {      // Go the IE way, as well as Opera and Chrome/Safari
          var sel = data.selectedText;
          var selStart = chatText.value.indexOf(sel);
          var selLen = sel.length;
          var selEnd = selStart + selLen;
          var begin = (chatText.value).substring(0, selStart);
          var middle = colorStartTag + sel + colorEndTag;
          var end = (chatText.value).substring(selEnd, (chatText.value).length);
          chatText.value = begin + middle + end;
        }
        else if(document.getSelection) {      // Go the Gecko way
          var begin = (chatText.value).substring(0, chatText.selectionStart);
          var middle = (chatText.value).substring(chatText.selectionStart, chatText.selectionEnd);
          var end = (chatText.value).substring(chatText.selectionEnd);
          var text = begin + colorStartTag + middle + colorEndTag + end;
          chatText.value = text;
        }
        else {                                          // degrade gracefully
          chatText.value += colorStartTag + colorEndTag
        }
      }
    I hope this comes in handy for others. It was a P.I.T.A. to research and implement, but well worth it.
    Making a difference, one little psychotic episode at a time
    Geek Cave Creations
    Beta testers needed for pChat
    Dave's Gallery

  5. #5
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,862
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    So you just need to hope you don't get too many visitors to your page that are using antiquated browsers that don't support that type of manipulation. Fortunately the most recently released browsers I am aware of that had that sort of issue are ones where people tend to update to the latest version fairly quickly and it is two versions back now since the problem was fixed.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  6. #6
    SitePoint Evangelist Dave Morton's Avatar
    Join Date
    Sep 2003
    Location
    Carson City, NV
    Posts
    557
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Since it's an ajax driven site, if someone's visiting with any ancient browsers (e.g NN4 or IE3), they're going to have more serious difficulties than whether this function is working properly. And even so, this function will gracefully degrade, so I'm not all that concerned.

    That said, I'm hoping to get some feedback from other users on different OS platforms, like *nix or pre-OSX macs (I consider OSX and later to be *nix platforms, even if that isn't necessarily correct). If anyone reading this is on any of these other platforms, I'd dearly love to hear from you, regarding the operation of this function. You can find it at http://www.geekcavecreations.com/pChat/. You should see a chat textbox in the lower right corner, and a multi-colored panel of color swatches in the lower left. Just type in some text in the textbox, select any or all of your text, and click on a swatch. Ideally it should look like:

    unselected text[ color]selected text[/color ]unselected text
    (please note the spaces are added to prevent BBcode breakage)

    If you could post back here with the following info:
    OS
    Browser
    What the resultant text looked like, after clicking on a swatch

    I'd be grateful. Thanks, everyone, and especially you, felgall, for your help with this.
    Making a difference, one little psychotic episode at a time
    Geek Cave Creations
    Beta testers needed for pChat
    Dave's Gallery

  7. #7
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,862
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Dave Morton View Post
    Since it's an ajax driven site, if someone's visiting with any ancient browsers (e.g NN4 or IE3), they're going to have more serious difficulties than whether this function is working properly.
    I was thinking more of Opera 8 which was actually the latest Opera version the last time I looked at trying to set cursor positions in input fields and which always resets to the start of the field no matter where in the field you try to position the cursor.

    Opera 8 does support Ajax but doesn't support positioning cursors inside input fields.

    Fortunately the number of people using Opera 8 is probably just about zero by now as Opera users usually update quickly when a new version comes out. That was the last version that will run on Windows NT though so anyone using Windows NT still might still be using that as the most advanced browser that their operating system supports.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  8. #8
    SitePoint Evangelist Dave Morton's Avatar
    Join Date
    Sep 2003
    Location
    Carson City, NV
    Posts
    557
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That brings up a good point, in that if anyone is still using older versions of any of the above listed browsers, it would be great if they could test the page, as well. I'm limited to just the one box, with only the browsers I listed earlier, so I can't do any testing with the older/non-Win32 browsers. I can browser-sniff for opera 8, but I can't see doing so for just one version of one browser. Hmmm. I'll have to think on this a bit. Of course, it could just be that Opera 8 is one of those browsers that "degrade gracefully". I just don't know.
    Making a difference, one little psychotic episode at a time
    Geek Cave Creations
    Beta testers needed for pChat
    Dave's Gallery

  9. #9
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Are you aware of IETester for testing IE 5.5 through to IE8 ?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  10. #10
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,862
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by pmw57 View Post
    Are you aware of IETester for testing IE 5.5 through to IE8 ?
    Does IETester actually install different versions of JScript or do they all share the same one? If the latter then using it wouldn't help in testing JScript. Anyway IE5.5 is dead while IE5 (which is not in your list) is still considered to be a live browser and will not be declared dead until Windows 2000 is declared dead which is still some way off.

    A better solution for testing different versions of IE is to install the free Microsoft virrtual machine along with the appropriate operating system images with the different versions of IE (although I think there you'd have to build your own image for IE5 - perhaps by installing that old copy of Win 2000 you have laying around).
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  11. #11
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by felgall View Post
    Does IETester actually install different versions of JScript or do they all share the same one?
    Here is some of the information that is provided:

    Here is the list of engines/features/dlls hooked by IETester when using a custom engine :
    • Trident engine (mshtml.dll / shdocvw.dll / ieframe.dll)
    • Javascript engine (jscript.dll)
    • Http functions (urlmon.dll / wininet.dll)
    • PNG transparency functions (dxtmsft.dll / dxtrans.dll / imgutil.dll / pngfilt.dll)
    So I would say that yes, there are different versions of JScript that are installed.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  12. #12
    SitePoint Evangelist Dave Morton's Avatar
    Join Date
    Sep 2003
    Location
    Carson City, NV
    Posts
    557
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pmw57 View Post
    Are you aware of IETester for testing IE 5.5 through to IE8 ?
    Well, I wasn't before, but I am now. I'll check it out.
    Quote Originally Posted by felgall View Post
    Does IETester actually install different versions of JScript or do they all share the same one? If the latter then using it wouldn't help in testing JScript. Anyway IE5.5 is dead while IE5 (which is not in your list) is still considered to be a live browser and will not be declared dead until Windows 2000 is declared dead which is still some way off.

    A better solution for testing different versions of IE is to install the free Microsoft virrtual machine along with the appropriate operating system images with the different versions of IE (although I think there you'd have to build your own image for IE5 - perhaps by installing that old copy of Win 2000 you have laying around).
    I've practically no experience with using VM's and such, though I'm not opposed to learning. And I have old copies of 98 and 2k "laying around", as you've mentioned.

    However, I'm leery of doing so until I learn a bit about it, and my workload more or less prohibits said learning till after the first of the year. But I will try to work it in sooner. Thanks for the tips.
    Making a difference, one little psychotic episode at a time
    Geek Cave Creations
    Beta testers needed for pChat
    Dave's Gallery


Bookmarks

Posting Permissions

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