JavaScript 实现 input 赋值与取值完整指南

JavaScript 实现 input 赋值操作概述

input 框赋值方法详解

在常规 HTML 开发中，文本框的基础代码结构如下。实际业务场景里，通常需要将从数据库获取的数据动态填充至 input 输入框中。

<input  id="name1"  name="teacherName" type="text"  />

借助以下 JavaScript 代码即可对 input 文本框完成赋值操作。下文列举的方法适用于不同情况，其中前两种为通用标准做法。

            $('#name1').val('值');
            document.getElementById('name1').value='值';
            document.getElementById('name1').html('值');
            document.getElementById('name1').attr('值');
            document.getElementById('name1').innerText = '值';

EasyUI 框架下的 input 赋值方案

在实际项目开发中，为提升页面视觉效果，常引入如 EasyUI 这类前端框架。此类框架生成的 HTML 代码结构如下所示：

<input class="easyui-textbox"  id="name"  name="teacherName" type="text"  />

若此时仍沿用前述方法一中的 JavaScript 代码尝试修改 input 的值，往往无法生效。需采用以下特定方式修改 EasyUI 框架下的 input 文本框值，相关 JavaScript 代码如下：

$('#name').textbox('setValue','值');

针对 EasyUI 的 input 文本框，获取其值的 JavaScript 代码如下：

var val = $("#name").textbox('getValue') 

补充内容：

JavaScript 获取 input 输入框内容的几种方法

JavaScript 中获取 input 输入框内容主要包含以下几种常用方法：

1. 利用 `document.getElementById()` 获取 input 元素的 value 属性，具体示例如下：

var inputText = document.getElementById("input").value;

2. 利用 `document.querySelector()` 获取 input 元素的 value 属性，具体示例如下：

var inputText = document.querySelector("#input").value;

3. 利用 `document.getElementsByName()` 获取 input 元素的 value 属性，具体示例如下：

var inputText = document.getElementsByName("input")[0].value;

4. 利用 `document.getElementsByTagName()` 获取 input 元素的 value 属性，具体示例如下：

 var inputText = document.getElementsByTagName("input")[0].value;

5. 利用 `document.forms` 获取表单对象，进而获取 input 元素的 value 属性，具体示例如下：

var form = document.forms[0];
var inputText = form.elements["input"].value;

上述五种为获取 input 输入框内容的常用技术手段。

至此，关于 JavaScript 实现 input 赋值的内容介绍完毕。如需了解更多相关 js input 赋值知识，建议查阅本站往期文章或继续浏览后续相关内容，感谢支持！