实现输入框自动切换（Enter触发/内容触达长度）及CodeIgniter适配方案（尽量少用JS）

Hey there! Let's tackle your requirement step by step. You want text inputs to jump to the next one when pressing Enter or when the input hits its max length, plus adapt this for CodeIgniter while keeping JS to a minimum. Here's how to do it:

1. 修正后的基础HTML & CSS #

First, I fixed the escaped characters in your original code (like > → >) and tweaked some CSS for better functionality:

CSS (save as assets/css/note-style.css in CodeIgniter) #

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.note {
  background-color: rgba(172, 255, 47, 0.63);
  width: 400px;
  height: 550px;
  margin: 0 auto;
  padding: 40px 30px 10px 30px;
  color: black;
  text-shadow: #33333381 1px 1px 1px;
}
.form-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
}
.container-flex {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 480px;
}
.green { color: green; background-color: lightgreen; }
.red { color: red; background-color: tomato; }
.gray { color: gray; background-color: lightgray; }
.orange { color: orange; background-color: coral; }
select {
  text-align: right;
  background-color: transparent;
  border: none;
  border-radius: 0;
  font-weight: 600;
}
select:focus {
  background-color: transparent;
  border: none;
  outline: none;
  border-radius: 0;
}
option {
  margin: 5px;
  width: 100px;
  border-radius: 0;
  text-align: center;
  padding: 5px;
}
.form-group {
  display: flex;
  flex-direction: column;
}
.form-date {
  display: flex;
  gap: 10px;
  justify-content: right;
}
input[type="date"] {
  border: none;
  background-color: transparent;
  width: auto;
}
.container-flex > .form-group {
  gap: 10px;
}
.form-group input[type="text"] {
  background-color: transparent;
  border: none;
  border-bottom: 1px solid #333;
}
input:focus {
  outline: none;
}

2. 精简JS实现自动切换 #

Pure HTML can't handle Enter-triggered or maxlength-triggered jumps, so we need a tiny snippet of JS (using event delegation to avoid redundant code):

JS (save as assets/js/note-script.js in CodeIgniter) #

document.addEventListener('DOMContentLoaded', function() {
  const noteInputs = document.querySelectorAll('.form-group input[type="text"]');
  const inputArray = Array.from(noteInputs);

  // 事件委托：一次绑定处理所有输入框
  const inputGroup = document.querySelector('.form-group');
  inputGroup.addEventListener('keydown', handleKeydown);
  inputGroup.addEventListener('input', handleInput);

  // Enter键触发跳转
  function handleKeydown(e) {
    const target = e.target;
    if (target.type !== 'text' || e.key !== 'Enter') return;
    
    e.preventDefault(); // 阻止表单默认提交
    const currentIdx = inputArray.indexOf(target);
    if (currentIdx < inputArray.length - 1) {
      inputArray[currentIdx + 1].focus();
    }
  }

  // 内容达到maxlength自动跳转
  function handleInput(e) {
    const target = e.target;
    if (target.type !== 'text' || !target.maxLength) return;
    
    if (target.value.length === target.maxLength) {
      const currentIdx = inputArray.indexOf(target);
      if (currentIdx < inputArray.length - 1) {
        inputArray[currentIdx + 1].focus();
      }
    }
  }
});

3. CodeIgniter 适配方案 #

Now let's integrate this into CodeIgniter following its best practices:

Step 1: Controller (application/controllers/NoteController.php) #

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class NoteController extends CI_Controller {

  public function __construct() {
    parent::__construct();
    $this->load->helper('form');
    $this->load->library('form_validation');
  }

  public function index() {
    // 处理表单提交
    if ($this->input->post()) {
      // 表单验证规则（示例）
      $this->form_validation->set_rules('action', 'Action', 'required');
      $this->form_validation->set_rules('date', 'Date', 'required');
      $this->form_validation->set_rules('note[]', 'Note', 'trim');

      if ($this->form_validation->run()) {
        // 收集数据
        $noteData = [
          'action' => $this->input->post('action'),
          'date' => $this->input->post('date'),
          'notes' => json_encode($this->input->post('note')) // 把多个输入转成JSON存库
        ];

        // 保存到数据库（示例）
        // $this->db->insert('notes_table', $noteData);

        $this->session->set_flashdata('success', 'Note saved successfully!');
        redirect('notecontroller');
      }
    }

    // 加载视图
    $this->load->view('note_view');
  }
}

Step 2: View (application/views/note_view.php) #

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Note</title>
  <link rel="stylesheet" href="<?= base_url('assets/css/note-style.css') ?>">
</head>
<body>
  <div class="note">
    <?= form_open('notecontroller/index', ['autocomplete' => 'off']) ?>
      <div class="container-flex">
        <div class="form-header">
          <div class="title">
            <h1>My Note</h1>
          </div>
          <div class="form-group">
            <div class="action">
              <?= form_dropdown('action', [
                '1' => '<span class="green">Выполнено</span>',
                '2' => '<span class="red">Важное</span>',
                '3' => '<span class="gray">Отложеное</span>',
                '4' => '<span class="orange">В процессе</span>'
              ], set_value('action'), 'id="action-select"') ?>
            </div>
            <div class="form-date">
              <label for="date">Date</label>
              <?= form_input('date', set_value('date'), 'type="date"') ?>
            </div>
          </div>
        </div>
        <div class="form-group">
          <label for="">Note:</label>
          <!-- 设置maxlength，名字用note[]接收数组 -->
          <?= form_input('note[]', set_value('note[]'), 'type="text" maxlength="50"') ?>
          <?= form_input('note[]', set_value('note[]'), 'type="text" maxlength="50"') ?>
          <?= form_input('note[]', set_value('note[]'), 'type="text" maxlength="50"') ?>
          <?= form_input('note[]', set_value('note[]'), 'type="text" maxlength="50"') ?>
          <?= form_input('note[]', set_value('note[]'), 'type="text" maxlength="50"') ?>
          <?= form_input('note[]', set_value('note[]'), 'type="text" maxlength="50"') ?>
          <?= form_input('note[]', set_value('note[]'), 'type="text" maxlength="50"') ?>
          <?= form_input('note[]', set_value('note[]'), 'type="text" maxlength="50"') ?>
          <?= form_input('note[]', set_value('note[]'), 'type="text" maxlength="50"') ?>
          <?= form_input('note[]', set_value('note[]'), 'type="text" maxlength="50"') ?>
          <?= form_input('note[]', set_value('note[]'), 'type="text" maxlength="50"') ?>
          <?= form_input('note[]', set_value('note[]'), 'type="text" maxlength="50"') ?>
        </div>
        <div class="task_id">
          <p class="id">ID: 1</p>
        </div>
      </div>
    <?= form_close() ?>
  </div>
  <script src="<?= base_url('assets/js/note-script.js') ?>"></script>
</body>
</html>

关键注意事项 #

1. CI配置: 确保在application/config/config.php中设置正确的base_url，比如：

   $config['base_url'] = 'http://your-domain.com/';
   

2. CSRF防护: CI的form_open自动处理CSRF验证（如果在config.php中开启了$config['csrf_protection'] = TRUE;）
3. 输入数组: 用note[]作为输入框名称，这样可以在Controller中一次性获取所有输入内容
4. 用户体验: 用set_value()保留提交后的输入值，避免用户重复输入

内容来源于stack exchange