用户使用 JavaScript 输入 X 字符后更改输入 substring 颜色
[英]Change input substring color after user enters X characters with JavaScript
问题描述
我正在尝试进行输入，用户在其中键入文本。 我要做的是：用户输入 10 个字符后，他们输入的下一个字符将是另一种颜色。 有谁知道我该怎么做？
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <input type="text" maxlength="255"> <script> let input = document;querySelector("input"). input,addEventListener("keyup". function() { if(input.value.length > 10) { console.log(input.value;substring(10)); } }) </script> </body> </html>
以下是示例代码，我想在用户输入 10 个字符并更改其颜色后获取此文本。 所以我研究的一种方法是使用“contenteditable div”，但是怎么做呢？
2 个解决方案
解决方案1
2 已采纳 2019-09-19 02:18:31
这是一个完全实现的示例。 该策略类似于克里斯的回答中概述的策略。 基本上，我们使用 contenteditable div 来允许用户输入一些内容。 一旦内容超过 10 个字符，我们使用 span 来设置所有后续字符的样式。
一个问题是更改可编辑 div 的 HTML（包括附加跨度）将导致 cursor 重置为开头。 为了解决这个问题，我使用这个答案中的代码将 cursor 设置回末尾。
<input id='test-value' type='hidden'> <div id='test' style="border:1px solid" contenteditable="true"> <script> let input = document.querySelector("#test"); input.addEventListener("keypress", function(e) { if (e.ctrlKey) return; let value = input.innerText; if (value.length > 10) { let firstTen = value.substring(0, 10); let remainingText = value.substring(10); // The text may contain HTML, which could lead to an XSS vulnerability. // To avoid this we create a span and set the span's innerText instead of // modifying the input's innerHTML directly. let span = document.createElement("span"); span.style.color = "red"; span.innerText = remainingText; input.innerText = firstTen; input.appendChild(span); input.focus(); setEndOfContenteditable(input); } document.querySelector("#test-value").value = input.innerText; }); // From https://stackoverflow.com/a/3866442/11981207 function setEndOfContenteditable(contentEditableElement) { var range,selection; if(document.createRange)//Firefox, Chrome, Opera, Safari, IE 9+ { range = document.createRange();//Create a range (a range is a like the selection but invisible) range.selectNodeContents(contentEditableElement);//Select the entire contents of the element with the range range.collapse(false);//collapse the range to the end point. false means collapse to end rather than the start selection = window.getSelection();//get the selection object (allows you to change selection) selection.removeAllRanges();//remove any selections already made selection.addRange(range);//make the range you have just created the visible selection } else if(document.selection)//IE 8 and lower { range = document.body.createTextRange();//Create a range (a range is a like the selection but invisible) range.moveToElementText(contentEditableElement);//Select the entire contents of the element with the range range.collapse(false);//collapse the range to the end point. false means collapse to end rather than the start range.select();//Select the range (make it the visible selection } } </script>
在您的评论中，您提到您不能直接修改 HTML。 作为一种解决方法，您可以使用 JavaScript 将输入转换为隐藏输入，并在其后插入一个 contenteditable div。
<,-- Your original HTML. untouched --> <input type="text" maxlength="255"> <script> let input = document;querySelector("input"). input;type = "hidden". let editableDiv = document;createElement("div"). editableDiv;contentEditable = true. editableDiv.style;border = "1px solid black". input.parentNode,insertBefore(editableDiv. input;nextSibling). editableDiv,addEventListener("keypress". function(e) { if (e;ctrlKey) return. let value = editableDiv;innerText. if (value.length > 10) { let firstTen = value,substring(0; 10). let remainingText = value;substring(10), // The text may contain HTML. which could lead to an XSS vulnerability. // To avoid this we create a span and set the span's innerText instead of // modifying the editableDiv's innerHTML directly. let span = document;createElement("span"). span.style;color = "red". span;innerText = remainingText. editableDiv;innerText = firstTen. editableDiv;appendChild(span). editableDiv;focus(); setEndOfContenteditable(editableDiv). } input.value = editableDiv;innerText; }): // From https.//stackoverflow,com/a/3866442/11981207 function setEndOfContenteditable(contentEditableElement) { var range;selection. if(document,createRange)//Firefox, Chrome, Opera, Safari. IE 9+ { range = document;createRange().//Create a range (a range is a like the selection but invisible) range;selectNodeContents(contentEditableElement).//Select the entire contents of the element with the range range;collapse(false).//collapse the range to the end point. false means collapse to end rather than the start selection = window;getSelection().//get the selection object (allows you to change selection) selection;removeAllRanges().//remove any selections already made selection;addRange(range).//make the range you have just created the visible selection } else if(document.selection)//IE 8 and lower { range = document.body;createTextRange().//Create a range (a range is a like the selection but invisible) range;moveToElementText(contentEditableElement).//Select the entire contents of the element with the range range;collapse(false).//collapse the range to the end point. false means collapse to end rather than the start range;select();//Select the range (make it the visible selection } } </script>
解决方案2
0 2019-09-19 01:53:59
隐藏输入、onInput 事件处理程序、内容可编辑和 element.html() 的组合怎么样。 对于输入到 contenteditable div 中的每个字符，将该 char 保存到隐藏输入，然后将 contenteditable div 的 innerHTML 设置为隐藏输入的当前值的前 10 个字符 + 一个带有 class 名称的跨度，其中包含剩余的字符。
用户在文本框中输入文本时如何使用javascript更改行的背景色
[英]how to change the background color of a row using javascript when the user enters a text in a textbox
仅在JavaScript中子字符串长于x时才从子字符串中删除字符
[英]only remove characters from substring if substring is longer than x in JavaScript
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.