Слова выделяются, когда мышь над

Question

Слова выделяются, когда мышь над

0

Мне нужна помощь. Как можно выделить одно слово в моем собственном тексте пасты.

Подобно тому, как у меня есть <textarea></textarea>, где я могу вставлять текст или только одно предложение, а когда мышь над одним словом, оно подсвечивается, как здесь, Дамовиса: http://jsfiddle.net/5gyRx/

<p>Each word will be wrapped in a span.</p>
<p>A second paragraph here.</p>
Word: <span id="word"></span>


// wrap words in spans
$('p').each(function() {
    var $this = $(this);
    $this.html($this.text().replace(/\b(\w+)\b/g, "<span>$1</span>"));
});

// bind to each span
$('p span').hover(
    function() { $('#word').text($(this).css('background-color','#ffff66').text()); },
    function() { $('#word').text(''); $(this).css('background-color',''); }
);

С уважением

koliani4 17 фев. 2014, в 21:05

Источник

0

Может быть, это приведет вас на правильный путь - странный планета.fr/work/jquery-highlighttextarea - это всего лишь эмулированный способ сделать это, но, как я вижу, должна быть возможность адаптировать код к вашим потребностям.
Fizk 17 фев. 2014, в 19:34

Теги:

javascript

jquery

html

css

3 ответа

1

Вы не можете, если вы посмотрите, что он делает, вы увидите, что он обертывает каждое слово в теге span. И затем делает то, что вам нужно.

Единственный способ, которым вы могли бы это сделать, - это вытащить его из текстового поля и обернуть его тегом span. Подобно тому, как работают теги tagit.

Steven 17 фев. 2014, в 18:04

1

Вы не сможете сделать это с помощью textarea из-за HTML-тегов.

Однако вы можете использовать <div contenteditable="true"> для "имитации" текстового поля.

HTML

<div contenteditable="true">Each word will be wrapped in a span.</div>
<div contenteditable="true">A second paragraph here.</div>
Word: <span id="word"></span>

JS

// wrap words in spans
$('div[contenteditable=true]').each(function() {
    var $this = $(this);
    $this.html($this.text().replace(/\b(\w+)\b/g, "<span>$1</span>"));
});

// bind to each span
$('div[contenteditable=true] span').hover(
    function() { $('#word').text($(this).css('background-color','#ffff66').text()); },
    function() { $('#word').text(''); $(this).css('background-color',''); }
);

ДЕМО: JSFiddle

jonsuh 17 фев. 2014, в 17:24

Ещё вопросы

Может быть, это приведет вас на правильный путь - странный планета.fr/work/jquery-highlighttextarea - это всего лишь эмулированный способ сделать это, но, как я вижу, должна быть возможность адаптировать код к вашим потребностям.

Rob Sedgwick · Accepted Answer · 2014-02-17T16-51-00.000Z

Парень, ты, ребята, быстро! - во всяком случае, поскольку я сделал это (было весело), мог бы также поделиться им

да Как и Джонсух отвечает хорошо - здесь, используя контент

ДЕМО: http://jsfiddle.net/P7S3Q/1/

Возможно, здесь добавляется возможность вставлять/изменять текст.

HTML:

<div class="wordscontainer" contenteditable="true">
    Paste words here ...
</div>

<div id="word"></div>

JS

function setHover() {
/* we could do to unbind here before re binding */
$('.wordscontainer span').hover(
    function() { 
        $('#word').text($(this).css('background-color','#ffff66').text()); },
    function() { 
         $('#word').text(''); $(this).css('background-color',''); }
);
}

$(".wordscontainer").keyup(function() {

    var $this = $(this);
    $this.html($this.text().replace(/\b(\w+)\b/g, "<span>$1</span>"));
    setHover();

});

НЕКОТОРЫЙ CSS, используемый для показа/демонстрации

.wordscontainer { 
     padding:10px; margin:10px; 
     border:2px solid #999; min-height:400px;
 }
#word { padding:10px margin:10px; font-size:20px; }

вау, это фантастика !!! Единственное, при использовании chrome вы не можете набирать слова :) следующая буква прыгает перед напечатанной. с тоесть все супер!
В этом коде много возможностей для улучшения, с ним можно весело играть, и с командами document.exec можно получить больше опыта. Надеюсь, это показывает начало чего-то. Благодарю.