JQuery Plugin - 突出显示包含某个单词的内容可编辑框
Posted
技术标签:
【中文标题】JQuery Plugin - 突出显示包含某个单词的内容可编辑框【英文标题】：JQuery Plugin - Highlighting a content editable box that contains a certain word 【发布时间】：2021-06-14 09:50:51 【问题描述】：这里是 html/CSS - https://jsfiddle.net/toalhea/y6hns5tr/1/
我正在尝试为作业创建一个 jquery 插件，该插件将突出显示单词或包含单词“burger”的框。
我对 jquery 和 javascript 还很陌生，只是迷失了如何做到这一点。建议使用innerhtml 或innertext。任何帮助表示赞赏。
(function($)
$.fn.highlightword = function ()
this.css( "background", "yellow" );
(jQuery));
【问题讨论】：
【参考方案1】：$(document).ready(function()
$( "#sortable1, #sortable2, #sortable3" ).sortable(
connectWith: "#sortable1, #sortable2, #sortable3",
);
$('[contentEditable="true"]').on('click', function ()
$(this).focus();
$(this).css("background-color", "yellow")
$(this).blur(function()
$(this).css("background-color", "white")
)
);
);.container
margin:auto;
max-width: 1000px;
#sortable1, #sortable2, #sortable3
border: 1px solid #012361;
width: 15%;
min-height: 20px;
list-style-type: none;
padding: 5px 0 0 0;
float: left;
#sortable1 li, #sortable2 li, #sortable3 li
margin: 0 5px 5px 5px;
padding: 5px;
font-size: 1.2em;
width: 120px;
h2
display: inline;
margin-right: 6em;
body
background-color: aliceblue;
#sortable
display: flex;
flex-direction: column;
#sortable ul
width: 100%;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Menu-Sortable</title>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="menu.css">
<script src="js/jquery.highlight-word.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<div class="container">
<h1> Sort the menu items to their appropriate header or rename the items to fit the category.</h1>
<h2>Appetizer</h2> <h2>Main Course</h2><h2>Dessert</h2> <br><br>
<div id="sortable">
<ul id="sortable1">
<li contenteditable="true"> Mozzerella Sticks</li>
<li contenteditable="true"> Brisket Nachos</li>
<li contenteditable="true"> Quesadillas</li>
<li contenteditable="true"> Salsa and Chips</li>
<li contenteditable="true"> Queso and Chips</li>
<li contenteditable="true"> Brisket Mac & Cheese</li>
</ul>
<ul id="sortable2">
<li contenteditable="true"> SouthWest Burger</li>
<li contenteditable="true"> Hawaiian Burger<li>
<li contenteditable="true"> Cannoli</li>
<li contenteditable="true"> Beef Brisket Sandwhich</li>
<li contenteditable="true"> Turkey Club Sandwhich</li>
<li contenteditable="true"> Lemon Souffles</li>
</ul>
<ul id="sortable3">
<li contenteditable="true"> Wonton Tacos</li>
<li contenteditable="true"> Molten Chocolate Lava Cake</li>
<li contenteditable="true"> English Custard</li>
<li contenteditable="true"> Queso Burger</li>
<li contenteditable="true"> Chocolate Chip Panookies</li>
<li contenteditable="true"> Frozen Hot Chocolate</li>
</ul>
</div>
</div>
</body>
</html>【讨论】：
以上是关于JQuery Plugin - 突出显示包含某个单词的内容可编辑框的主要内容，如果未能解决你的问题，请参考以下文章
JQuery Validation Plugin - 如果用户选择任一单选按钮，则验证字段。
突出显示 jQuery.autocomplete 的多个关键字
使用 Javascript/JQuery 为移动网络（Android、iOS、Windows Phone）突出显示/选择元素上的文本