个人中心
gpt4 book ai didi

javascript - 用户使用 JavaScript 输入 X 个字符后更改输入子字符串颜色

转载 作者：行者123 更新时间：2023-12-01 00:37:22 25 4
gpt4 key购买 nike

我正在尝试进行输入，用户在其中键入文本。我想要做的是:用户输入 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”，但是如何使用呢？

最佳答案

这是一个完全实现的示例。该策略与克里斯的回答中概述的策略类似。基本上，我们使用 contenteditable div 来允许用户输入一些内容。一旦内容超过 10 个字符，我们就使用跨度来设置所有后续字符的样式。

一个问题是，更改可编辑 div 的 HTML(包括附加跨度)将导致光标重置到开头。为了解决这个问题，我使用了 this answer 中的代码将光标设置回末尾。

<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>

关于javascript - 用户使用 JavaScript 输入 X 个字符后更改输入子字符串颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58002584/

25 4 0
文章推荐： mysql - 我应该更改我的 MySQL 数据库结构吗？
文章推荐： Javascript:如何数到特定数字？
文章推荐： javascript - 如何使用JS隐藏点击外部的上下文菜单？
文章推荐： OpenGL - 切换着色器
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com