我正在尝试在 a 中输入字符串,contenteditable div
并基于"#" in a string
,转到 ajax 调用。
1) 如果'#' comes as first character as user input
,则进行 ajax 调用。
2) 如果空格/制表符出现在 `'#' 之前,则进行 ajax 调用
3) 如果用户输入一个字符串并将光标手动放置在字符串之间并提供空格,然后是“#”,然后是空格,则进行 ajax 调用。
<div contenteditable="true" onkeyup="detectHash($event)"></div>
function detectHash(event){
var input = event.target.innerText.trim();
// check above conditions (1),(2),(3), conditons true,
// go for ajax call
$().ajax({
success:function(){
}
}}
}
您可以使用正则表达式来传递这些规则:
1) 如果 '#' 作为用户输入的第一个字符,则进行 ajax 调用。
2) 如果空格/制表符出现在 `'#' 之前,则进行 ajax 调用
(3 与 2 相同)
规则 1:^#
^
= 行首
规则 2:\s#
\s
= 任何空格,包括制表符
示例代码段,这些可以组合成一个正则表达式,但单独用于演示(与 noajax/goajax 类一样 - 仅用于代码段)
$("div").on("input", detectHash);
function detectHash(event) {
var input = event.target.innerText.trim();
if (input.match(/^#/) || input.match(/\s#/))
{
$("#out").removeClass("noajax").addClass("goajax");
} else {
$("#out").removeClass("goajax").addClass("noajax");
}
}
div#inp { border:1px solid #ccc; height:200px; width:200px; }
div.noajax { background-color: red; height:5px; width:200px; }
div.goajax { background-color: green; height:5px; width:200px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='inp' contenteditable="true"></div>
<div id='out' class="noajax"></div>
或者,.indexof
如果您还需要检查选项卡,您可以使用但可能需要额外的,而.match
with 会\s
为您处理。
if (input.indexOf("#") === 0 || input.indexOf(" #") >= 0)
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句