How to Get Selected Text from a Textbox Control With JavaScript

How to get selected text from a textbox control with JavaScript

OK, here is the code I have:

function ShowSelection()
{
  var textComponent = document.getElementById('Editor');
  var selectedText;

  if (textComponent.selectionStart !== undefined)
  { // Standards-compliant version
    var startPos = textComponent.selectionStart;
    var endPos = textComponent.selectionEnd;
    selectedText = textComponent.value.substring(startPos, endPos);
  }
  else if (document.selection !== undefined)
  { // Internet Explorer version
    textComponent.focus();
    var sel = document.selection.createRange();
    selectedText = sel.text;
  }

  alert("You selected: " + selectedText);
}

The problem is, although the code I give for Internet Explorer is given on a lot of sites, I cannot make it work on my copy of Internet Explorer 6 on my current system. Perhaps it will work for you, and that's why I give it.

The trick you look for is probably the .focus() call to give the focus back to the textarea, so the selection is reactivated.

I got the right result (the selection content) with the onKeyDown event:

document.onkeydown = function (e) { ShowSelection(); }

So the code is correct. Again, the issue is to get the selection on click on a button... I continue to search.

I didn't have any success with a button drawn with a li tag, because when we click on it, Internet Explorer deselects the previous selection. The above code works with a simple input button, though...

Get selected text from Textbox adjacent to a selected checkbox

I have used closest() to get to the tr parent tag and then applied find to get to corresponding checkbox.

$(document).ready(function() {  console.log("ready!");
  $("#submit").click(function(e) {
    $(".cb:checked").each(function() {      var cb = $(this);      console.log(cb.closest('tr').find('select option:selected').text());      if (cb.closest('tr').find('select option:selected').text() == "-") {        cb.closest('tr').find('select').css("border-color", "red");      }    })  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><table>  <tr>    <td>      <input class="cb" type="checkbox">    </td>    <td>some text</td>    <td>      <select>        <option>-</option>        <option>abc</option>        <option>def</option>        <option>ghi</option>      </select>    </td>  </tr>  <tr>    <td>       <input class="cb" type="checkbox">    </td>    <td>some text</td>    <td>      <select>        <option>-</option>        <option>abc</option>        <option>def</option>        <option>ghi</option>      </select>    </td>  </tr>  <tr>    <td>    <input class="cb" type="checkbox">    </td>    <td>some text</td>    <td>      <select>        <option>-</option>        <option>abc</option>        <option>def</option>        <option>ghi</option>      </select>    </td>  </tr>  <tr>    <td>      <input class="cb" type="checkbox">    </td>    <td>some text</td>    <td>      <select>        <option>-</option>        <option>abc</option>        <option>def</option>        <option>ghi</option>      </select>    </td>  </tr>  <tr>    <td>      <input class="cb" type="checkbox">    </td>    <td>some text</td>    <td>      <select>        <option>-</option>        <option>abc</option>        <option>def</option>        <option>ghi</option>      </select>    </td>  </tr></table><button id="submit">  Save</button>

Get selected option text with JavaScript

Try options

function myNewFunction(sel) {  alert(sel.options[sel.selectedIndex].text);}

<select id="box1" onChange="myNewFunction(this);">  <option value="98">dog</option>  <option value="7122">cat</option>  <option value="142">bird</option></select>

How can I get the selected text in a textarea?

Try the jquery-fieldselection plugin.

You can download it from here. There is an example too.

Select all contents of textbox when it receives focus (Vanilla JS or jQuery)

$(document).ready(function() {
    $("input:text").focus(function() { $(this).select(); } );
});

How to get highlighted text position from textarea?

This will work for text selection with the mouse and keyboard for all <textarea> elements on the page.
Change the selector (be more specific) if you don't want all <textarea> elements to have this text selection.

Read the comments, you will find out there how to disable keyboard selection, if you don't want/need keyboard selection.

var mySelection = function (element) {
    let startPos = element.selectionStart;
    let endPos = element.selectionEnd;
    let selectedText = element.value.substring(startPos, endPos);

    if(selectedText.length <= 0) {
      return; // stop here if selection length is <= 0
    }
    
    // log the selection
    console.log("startPos: " + startPos, " | endPos: " + endPos );
    console.log("selectedText: " +  selectedText);

  };

var textAreaElements = document.querySelectorAll('textarea');
[...textAreaElements].forEach(function(element) {
    // register "mouseup" event for the mouse
    element.addEventListener('mouseup', function(){
        mySelection(element)
    });
    
    // register "keyup" event for the keyboard
    element.addEventListener('keyup', function( event ) {
        // assuming we need CTRL, SHIFT or CMD key to select text
        // only listen for those keyup events
        if(event.keyCode == 16 || event.keyCode == 17 || event.metaKey) {
            mySelection(element)
        }
    });
});

textarea {
   resize: none; 
   width: 50%;
   height: 50px; 
   margin: 1rem auto;
}

<textarea>I am a student and I want to become a good person</textarea>

How to Select particular text in textbox while textbox receives focus

assume you have TextInput you want to select its first character, whenever its selected

<input id="MyText" type="text" value="text" onclick="MyText_click()" />

and the script is like this:

<script>

    function MyText_click() {

        var input = document.getElementById("MyText");
        createSelection(input, 0, 1); // first character
    };

    function createSelection(field, start, end) {
        if (field.createTextRange) {
            var selRange = field.createTextRange();
            selRange.collapse(true);
            selRange.moveStart('character', start);
            selRange.moveEnd('character', end);
            selRange.select();
            field.focus();
        } else if (field.setSelectionRange) {
            field.focus();
            field.setSelectionRange(start, end);
        } else if (typeof field.selectionStart != 'undefined') {
            field.selectionStart = start;
            field.selectionEnd = end;
            field.focus();
        }
    }

</script>

How to Get Selected Text from a Textbox Control With JavaScript