首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何在输入值上自动增长文本?

如何在输入值上自动增长文本?
EN

Stack Overflow用户
提问于 2021-07-21 18:26:20
回答 1查看 327关注 0票数 0

我有一个输入表单字段,它将文本输出到另一个创建的输入,本质上是一个可编辑的待办事项列表。我试图使输入的文本值自动增长,但无法知道如何实现。现在,用户必须滚动以查看每个列表项上的其余文本。不应该是这样的。

我尝试过:我尝试创建一个span并附加editableContent,但是这使得我的输入文本消失了。

我尝试过在所创建的输入上设置一个最大长度的属性,但无法使其工作。实现文本输入值自动增长的最佳方法是什么?这是完整的码页

代码语言:javascript
运行
复制
const createTodoText = (todo) => {
  const itemText = document.createElement("INPUT");
  // const itemText = document.createElement("span");
  // itemText.contentEditable
  // itemText.contentEditable = 'true'
  itemText.classList.add("todoText");
  itemText.value = todo.name;
  itemText.addEventListener("click", (e) => {
    e.currentTarget.classList.add("active");
  });
  // update todo item when user clicks away
  itemText.addEventListener("blur", (e) => {
    todo.name = e.currentTarget.value;
    renderTodos();
  });
  return itemText;
};
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-07-21 18:54:20

给你:-

代码语言:javascript
运行
复制
// select DOM elements
const todoForm = document.querySelector(".todo-form");
const addButton = document.querySelector(".add-button");
const input = document.querySelector(".todo-input");
const ul = document.getElementById("todoList");

let todos = [];

todoForm.addEventListener("submit", function (e) {
  e.preventDefault();
  addTodo(input.value);
});

const addTodo = (input) => {
  if (input !== "") {
    const todo = {
      id: Date.now(),
      name: input,
      completed: false
    };
    todos.push(todo);
    renderTodos();
    todoForm.reset();
  }
};

const renderTodos = (todo) => {
  ul.innerHTML = "";
  todos.forEach((item) => {
    let li = document.createElement("LI");
    // li.classList.add('item');
    li.setAttribute("class", "item");
    li.setAttribute("data-key", item.id);
    const itemText = createTodoText(item);
    const cb = buildCheckbox(item);
    const db = buildDeleteButton(item);
    // if (item.completed === true) {
    //  li.classList.add('checked');
    // }
    li.append(cb);
    li.append(db);
    li.append(itemText);

    ul.append(li);
  });
};

const createTodoText = (todo) => {
  const itemText = document.createElement("span");
  itemText.setAttribute('role','textbox');
  itemText.setAttribute('contenteditable',"true");
  itemText.classList.add("todoText");
  itemText.innerHTML = todo.name;
  itemText.addEventListener("click", (e) => {
    e.currentTarget.classList.add("active");
  });
  // update todo item when user clicks away
  itemText.addEventListener("blur", (e) => {
    todo.name = e.target.textContent;
    renderTodos();
  });
  return itemText;
};

const buildCheckbox = (todo) => {
    const cb = document.createElement('input');
    cb.type = 'checkbox';
    cb.name = 'checkbox';
    cb.classList.add('checkbox');
    cb.checked = todo.completed;
    // checkbox not staying on current state ??
    cb.addEventListener('click', function (e) {
        if (e.target.type === 'checkbox') {
            // todo.completed = e.target.value;
      todo.completed = e.currentTarget.checked
            e.target.parentElement.classList.toggle('checked');
        } 
    });
    return cb;
};

const buildDeleteButton = (todo) => {
  const deleteButton = document.createElement("button");
  deleteButton.className = "delete-button";
  deleteButton.innerText = "x";
  deleteButton.addEventListener("click", function (e) {
    // duplicates children sometimes ??
    const div = this.parentElement;
    div.style.display = "none";
    todos = todos.filter((item) => item.id !== todo.id);
  });
  return deleteButton;
};

// //------ Local Storage ------
function addToLocalStorage(todos) {}

function getFromLocalStorage() {}

// getFromLocalStorage();

这是Javscript代码部分。在createTodoText中,您可以看到我所做的更改。它是根据你想要的发挥作用的。我所做的是简单地使用'span‘而不是’输入‘。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/68474723

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档