How to surround selected text inside textarea with <em> on key combination CTRL+i?

» javascript » How to surround selected text inside textarea with <em> on key combination CTRL+i?

By : kippernicus

Date : January 12 2021, 09:11 PM

fixed the issue. Will look into that further When I select a text inside textarea and press Ctrl + i I would like to prepend and append HTML to it. So if I select dolor sit inside Lorem ipsum dolor sit amet I would like that text to become Lorem ipsum dolor sit amet. The same functionality like we can do it in WordPress. , You can use substring to do above .i.e :

code :

jQuery('textarea').on('keydown', function(e) {

  // If key press combination is CTRL+i
  if (e.ctrlKey && e.key == 'i') {

    //getting length of text
    var length = $('#abc').val().length;
    //starting text
    var start_point = $('#abc')[0].selectionStart;
    //ending text
    var end_point = $('#abc')[0].selectionEnd;

    //getting selected text
    var selectedText = $('#abc').val().substring(start_point, end_point);
    console.log(selectedText);
    var replacement = "<em>" + selectedText + "</em>";
    $('#abc').val($('#abc').val().substring(0, start_point) + replacement + $('#abc').val().substring(end_point, length));

  }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<textarea id="abc">Lorem ipsum dolor sit amet</textarea>

Share :

How to replace the currently selected text inside an html textarea?

By : Edson Medina

Date : March 29 2020, 07:55 AM

I hope this helps you . How do I edit the selected text of a textarea form element? , This works:

code :

function replaceIt(txtarea, newtxt) {
  $(txtarea).val(
        $(txtarea).val().substring(0, txtarea.selectionStart)+
        newtxt+
        $(txtarea).val().substring(txtarea.selectionEnd)
   );  
}
    

$("button").on('click', function() {
  replaceIt($('textarea')[0], 'fun')
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea>Hello world.</textarea>
<button>Replace with fun</button>

How to surround selected text in PyCharm like with Sublime Text

By : RAJESHKUMAR

Date : March 29 2020, 07:55 AM

I think the issue was by ths following , I think you want something like
Settings | Editor | General | Smart Keys -> Surround selection on typing quote or brace

JavaScript: Selected text is not getting replaced when the text is inside a textarea

By : Ethernaly

Date : March 29 2020, 07:55 AM

wish help you to fix your issue The problem is that the text inside a textarea cannot be accessed using window.getSelection.
To access the text, there are different selection API namely selectionStart (The index of the beginning of selected text) and selectionEnd (The index of the end of selected text).

code :

function ShowSelectionInsideTextarea(replacementText, eleID)
{
    var textComponent = document.getElementById(eleID);

    if (textComponent.selectionStart != undefined)
      {
        var mainStr = document.getElementById(eleID).value;
        var startPos = textComponent.selectionStart;
        var endPos = textComponent.selectionEnd;
        selectedText = textComponent.value.substring(startPos, endPos);
        mainStr= mainStr.replace(selectedText, replacementText);
        document.getElementById(eleID).innerHTML=mainStr;      
      }
}

Find out if a selected text is inside a input field or textarea

By : Denis Setianto

Date : March 29 2020, 07:55 AM

it helps some times Here is the sample code, in which the alert message is shown only if the mouseup event came from element that is not textarea or input of type text.
EDITED CODE:

code :

$(function() {
    var isInputOrTextarea = false;
	$(document).on("mousedown", function(e) {
        // On mousedown flag whether it was clicked in input or textarea
        if($(e.target).is("textarea,input[type=text]")) {
            isInputOrTextarea = true;
        }
    });    
	$(document).on("mouseup", function(e) {
        if($(e.target).is("textarea,input[type=text]") || isInputOrTextarea) {
            isInputOrTextarea = false;
            return;
        }
        isInputOrTextarea = false;
        alert("Not in text area or input");
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" value="Lorem ipsum"/>
<textarea>
    Lorem ipsum
</textarea>
<p>
    Lorem ipsum
</p>