TextField Selection window.getSelection() Is Blank or Undefined

  1. #1

    TextField Selection window.getSelection() Is Blank or Undefined

    I can not get the selected area from an EXT.NET textfield. No matter what variation i try to access, it will always be an empty string.
    What am I doing wrong?

    FYI: this solution no longer works. http://forums.ext.net/showthread.php...ll=1#post75467


    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
    
            }
        }
    </script>
    
    <!DOCTYPE html>
    <html>
    <head runat="server">
        <title></title>
        <ext:XScript runat="server">
            <script>
                var KeyCheck = function (field, e) {
                    if (e.ctrlKey && e.getKey() === e.X) {
                        e.Handled = true;
    
                        var text = "";
                        if (window.getSelection
                        && window.getSelection().toString()
                        && $(window.getSelection()).attr('type') != "Caret") {
                            text = window.getSelection();
                        }
                        else if (document.getSelection
                        && document.getSelection().toString()
                        && $(document.getSelection()).attr('type') != "Caret") {
                            text = document.getSelection();
                        }
                        else {
                            var selection = document.selection && document.selection.createRange();
    
                            if (!(typeof selection === "undefined")
                            && selection.text
                            && selection.text.toString()) {
                                text = selection.text;
                            }
                            alert(text);
                        }
                    }
                }
     </script>
        </ext:XScript>
    </head>
    <body>
        <form id="form1" runat="server">
            <ext:ResourceManager runat="server" />
            <div>
                <ext:Container runat="server" Layout="Fit">
                    <Items>
                        <ext:TextField ID="txtEntry" runat="server" Width="150" Text="Select a portion of this text and hit Ctrl + X" EnableKeyEvents="true">
                            <Listeners>
                                <KeyDown Fn="KeyCheck" />
                            </Listeners>
                        </ext:TextField>
                    </Items>
                    <Content>
                    </Content>
                </ext:Container>
            </div>
        </form>
    </body>
    </html>
    Last edited by pmaidlow; Jul 29, 2015 at 4:42 PM. Reason: adding previous post non-working solution
  2. #2
    Any updates on this issue?
  3. #3
    Hi @pmaidlow,

    The sample works for me. Tested in IE10 and Chrome. What browser are you testing with?

    By the way, to get an alert box appeared in Chrome I had to move alert(text); out of the else block.

    Also I needed to add a jQuery script to get the sample working.
    <script src="https://code.jquery.com/jquery-2.1.4.js"></script>
  4. #4
    I was missing the jquery script which does seem to now work in Chrome. However it still does not work in IE 11 or Firefox 38.0.1.
  5. #5
    This might help in regards to Firefox.
    http://stackoverflow.com/questions/2...ing-in-firefox

    As for IE11 it might be also possible to find an answer on the internet.
  6. #6
    I will look around for the IE 11 issue, however the fix for Firefox seems like it would work if i was using a "textarea". How would i "get" the value from an ext:TextField?

    I have tried "ext:TextField", "text", and "value" all to no avail.

    <div>Text in div</div>
    <textarea>Hello textarea</textarea>
    <div id='debug'></div>
    
    var ta = $('textarea').get(0);
    return ta.value.substring(ta.selectionStart, ta.selectionEnd);
  7. #7
    Please a TextField's getValue method.
    field.getValue()
  8. #8
    First I want to say that Daniil is awesome.

    Second here is the updated code which i have working with Chrome and semi working with Firefox (IE I will worry about later). I can grab the value in Firefox however the selectionStart and selectionEnd are still null. Any advice?


    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script src="https://code.jquery.com/jquery-2.1.4.js"></script>
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
    
            }
        }
    </script>
    
    <!DOCTYPE html>
    <html>
    <head runat="server">
        <title></title>
        <ext:XScript runat="server">
            <script>
                var KeyCheck = function (field, e) {
                    if (e.ctrlKey && e.getKey() === e.X) {
                e.Handled = true;
    
                var text = "";
                if (window.getSelection) {
                    try {
                        var ta = field.getValue();  //THIS IS FOR FIREFOX
                        text = ta.substring(ta.selectionStart, ta.selectionEnd);
                    } catch (e) {
                        text = window.getSelection();  //THIS IS FOR CHROME
                        if (text == "") {
                            text = "Cant get window.getSelection text";
                        }
                    }
                }
                alert(text);
            }
        }
     </script>
        </ext:XScript>
    </head>
    <body>
        <form id="form1" runat="server">
            <ext:ResourceManager runat="server" />
            <div>
                <ext:Container runat="server" Layout="Fit">
                    <Items>
                        <ext:TextField ID="txtEntry" runat="server" Width="150" Text="Select a portion of this text and hit Ctrl + X" EnableKeyEvents="true">
                            <Listeners>
                                <KeyDown Fn="KeyCheck" />
                            </Listeners>
                        </ext:TextField>
                    </Items>
                    <Content>
                    </Content>
                </ext:Container>
            </div>
        </form>
    </body>
    </html>
  9. #9
    Thank you for the kind words.

    Please try ta.inputEl.dom.selectionStart instead of ta.selectionStart. And same for selectionEnd.

Similar Threads

  1. [CLOSED] Checkboxmodel : Problem with SelectionModel.getSelection()
    By matrixwebtech in forum 2.x Legacy Premium Help
    Replies: 10
    Last Post: Dec 26, 2014, 10:43 AM
  2. Replies: 0
    Last Post: Mar 04, 2013, 9:30 AM
  3. Blank space in checkbox selection model
    By yash.kapoor in forum 2.x Help
    Replies: 3
    Last Post: Jan 07, 2013, 4:31 AM
  4. [CLOSED] TextField inside RowExpander doesn't allow blank spaces
    By pawangyanwali in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: Nov 02, 2012, 11:44 AM
  5. Replies: 0
    Last Post: Jul 08, 2012, 2:55 PM

Tags for this Thread

Posting Permissions