How to use a text selector in html?

Asked

Viewed 282 times

3

How can I make a text selector within HTML so that I can have options when certain text within a p tag, for example, is selected?

javascript html css
  • 1

    Face your question is a little confusing. You want to clip on the word "X" inside a P tag and want something to change is that? Or you want to find the P tag that has the "X" word inside and put a class in it?

  • 1

    Opa, type, I want to select (with the mouse) a 3 consecutive words and when that happens, I want to show possible actions to the user. Understand?

3 answers

3


To get the selected text you use the function getSelection():

Take the example: 

$('p').mouseup(function(){
    var range = window.getSelection();
    alert(range);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>Como eu posso fazer um seletor de texto dentro do HTML de forma que eu possa ter opções quando determinado texto dentro de uma tag p, por exemplo, for selecionado?</p>

Reference of the getSelection function()

  • I took the liberty of editing your reply to embed an executable code.

  • @lazyFox I saw, it was good, do not know yet how to create executable answers so, thank you very much.

  • Just too many thanks bro

  • 1

    When editing press CTRL + M. If it doesn’t work in the editing window see the icon to the right of the image

2

You can assign a function to be executed when an event occurs in the element.

The event for when a text is selected in the tag, would be the event onSelect.

For example, you want the selected text to appear on the console, so you would do something like:

<p onselect="funcao()">(conteúdo aqui)</p>

<script>function funcao() { alert('Selecionou um texto'); }</script>

And about the function receiving data from an input, I believe that this input should be captured in the function that the event calls.

-1

I don’t know if it’s exactly what you want, but you can let the textarea customized using tinyMCE.

The Tinymce is a textarea with editable freatures. You can leave only bold and italic, until the possibility of viewing the html code being generated from behind, among others. I’ve been using for a while, it’s really good.

Browser other questions tagged javascript html css

You are not signed in. Login or sign up in order to post.