无法使用 javascript 更改输入字段文本内容

Question

我正在尝试将输入字段中的文本更改为用户名。 该字段的 id 是 is_username。

在我尝试过的 Javascript 文件中

document.getElementById("id_username").innerHTML = "Username";

document.getElementById("id_username").value = "Username";

document.querySelector(".id_username").textContent = "Username";

没有一个工作......这个网站在 django 上运行。 我知道 html 可以使用占位符来实现这一点，但这些字段是使用 django 标签创建的。

有任何想法吗？

我确实尝试在正常的 html 输入字段上使用这些方法，但也没有运气。

网页：

{% extends 'display_words.html' %}

{% block content %}
<div class="flex-container">
  <div class="content">
      <div class="display-box">
            <!-- <p>Please login to see this page.</p> -->
          {% if form.errors %}
            <p>Your username and password didn't match. Please try again.</p>
          {% endif %}

          {% if next %}
            {% if user.is_authenticated %}
              <p>Your account doesn't have access to this page. To proceed,
              please login with an account that has access.</p>
            {% else %}
              <p>Please login to see this page.</p>
            {% endif %}
          {% endif %}

          <form method="post" action="{% url 'login' %}">
            {% csrf_token %}
            <table>
              <tr>
                <!-- <td>{{ form.username.label_tag }}</td> -->
                <td>{{ form.username }}</td>
              </tr>
              <tr>
                <!-- <td>{{ form.password.label_tag }}</td> -->
                <td>{{ form.password }}</td>
              </tr>
            </table>
            <input id="login-button" class="button" type="submit" value="login">
            <input type="hidden" name="next" value="{{ next }}">
          </form>

          {# Assumes you setup the password_reset view in your URLconf #}
          <p id="lost-password-link"><a href="{% url 'password_reset' %}">Lost password?</a></p>
        </div>  
      </div>
  </div>
{% endblock %}

我创建了一个测试 html 文件，它也不起作用：代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8"/>
    <title>Words & Phrases</title>

    
  </head>

  <body>

    <input type="text" id=“id_username”>

<script>

    document.querySelector('#id_username').textContent = 'username';

</script>

</body>

Answer 1

你可以试试这个：

 document.querySelector('input[name="id_username"]').value = 'Username';

 <input type="text" name="id_username" id="id_username" placeholder="Your text">

Answer 2

想指出的是，当您尝试查询选择器时。 您使用了“.id_username”，这会选择一个名为 class 的 ZA2F2ED4F8EBC2CBB4C21DZ，而不是 id。

您可以尝试将所选元素存储在变量中，然后运行 innerHTML/textcontent。

const stubbornInput = document.getElementById("id_username");

stubbornInput.innerHTML = 'Whatever you want';

我曾经遇到过这样的情况，但是，直截了当的事情没有。 不知道它是否有帮助或为什么它以前对我有用，但值得一试:)

Answer 3

您的文本输入具有 ID username ，在您的 javascript 中显示id_username尝试此输入和 javascript。

 document.getElementById("username").value = "your_value_here";

 <input type="text" name="username" id="username">

如果这不起作用，请尝试使用 JQuery。

$("input[name=username]").val("hello_world")

Answer 4

好的，下面是正确答案：

我的主 js 文件导致了一个问题，这就是为什么它之前对我不起作用的原因。 在我为此目的创建了一个空的 js 文件之后，它就起作用了。

document.querySelector('#id_username').value = 'username' ;
document.querySelector('#id_username').addEventListener('click', function () {
  document.querySelector('#id_username').value = '';
})

Answer 5

发现更容易做到这一点：

document.querySelector('#id_username').setAttribute('placeholder', '用户名');

无法使用 javascript 更改输入字段文本内容

问题描述

5 个解决方案

解决方案1
1 2022-09-09 10:38:37

解决方案2
0 2022-09-09 10:36:26

解决方案3
0 2022-09-09 14:28:49

解决方案4
0 2022-09-09 15:02:29

解决方案5
0 2022-09-09 15:16:51

无法使用 javascript 更改输入字段文本内容

问题描述

5 个解决方案

解决方案1 1 2022-09-09 10:38:37

解决方案2 0 2022-09-09 10:36:26

解决方案3 0 2022-09-09 14:28:49

解决方案4 0 2022-09-09 15:02:29

解决方案5 0 2022-09-09 15:16:51

解决方案1
1 2022-09-09 10:38:37

解决方案2
0 2022-09-09 10:36:26

解决方案3
0 2022-09-09 14:28:49

解决方案4
0 2022-09-09 15:02:29

解决方案5
0 2022-09-09 15:16:51