使用原生js input不使用第三方库实现jsoneditor的文本框字体带不同颜色方法并且可以输入和保存拿到参数的方法有吗？-Go服务器开发

要实现文本框中不同颜色的字体效果，您可以使用原生 JavaScript 来操作 DOM 元素。以下是一个示例代码，实现了根据 JSON 数据设置文本框中字体颜色的功能：

<!DOCTYPE html>
<html>
  <head>
    <style>
      .red {
        color: red;
      }
      .blue {
        color: blue;
      }
    </style>
  </head>
  <body>
    <textarea id="jsonEditor" rows="10" cols="50"></textarea>

    <script>
      var jsonEditor = document.getElementById('jsonEditor');

      jsonEditor.addEventListener('input', function() {
        var jsonString = jsonEditor.value;
        try {
          var jsonData = JSON.parse(jsonString);
          renderJsonData(jsonData);
        } catch (error) {
          console.error(error);
        }
      });

      function renderJsonData(data) {
        if (!data) return;

        var formattedJson = JSON.stringify(data, null, 2);
        var coloredText = formatColoredText(formattedJson);

        jsonEditor.innerHTML = '';
        jsonEditor.appendChild(coloredText);
      }

      function formatColoredText(text) {
        var coloredTextContainer = document.createElement('div');

        // 按行分割文本
        var lines = text.split('\n');
        
        // 对每一行进行处理
        for (var i = 0; i < lines.length; i++) {
          var lineElement = document.createElement('div');
          
          // 判断是否为键值对的行，并设置相应样式类
          if (lines[i].includes(':')) { 
            lineElement.classList.add('blue');
          } else {
            lineElement.classList.add('red');
          }

          lineElement.textContent = lines[i];
          coloredTextContainer.appendChild(lineElement);
        }

        return coloredTextContainer;
      }
    </script>
  </body>
</html>

上述代码使用 <textarea> 元素作为文本框，监听其 input 事件。每次输入改变时，将文本框的内容解析为 JSON 数据，并根据数据的不同部分设置相应的颜色样式。

您可以在这个示例代码的基础上进行修改和扩展，添加保存参数的逻辑。例如，在 renderJsonData 函数中可以将 data 数据发送给服务器进行保存操作。

内容由零声教学AI助手提供，问题来源于学员提问