javascript,HTML表单:单击按钮插入NULL

javascript, HTML Form: Click button to insert NULL

本文关键字:按钮 插入 NULL 单击 HTML 表单 javascript      更新时间:2023-09-26

这是我正在使用的代码,它可以在文本区域字段中运行,但不能在input域中运行。如何修改代码以便在输入字段中运行??

  <head>
    <script type="text/javascript">
      function insertText(elemID, text)
      {
        var elem = document.getElementById(elemID);
        elem.innerHTML = text;
      }
    </script>
  </head>
    <form>
	<textarea id="txt1" name="passport_no" rows="1" style="width: 100px" required="required"></textarea>
    <input type="button" value="If no value, click here to input NULL !" onclick="insertText('txt1', 'NULL');">
	
	<br><br>
	<textarea id="txt2" name="hkid_no" rows="1" style="width: 100px" required="required"></textarea>  
    <input type="button" value="If no value, click here to input NULL !" onclick="insertText('txt2', 'NULL');"> 
    </form>

我试图修改为输入字段,如下所示,但它无法运行。

    <form>
	<input id="txt1" name="passport_no" style="width: 100px" required="required">
    <input type="button" value="If no value, click here to input NULL !" onclick="insertText('txt1', 'NULL');">
	
	<br><br>
	<input id="txt2" name="hkid_no" style="width: 100px" required="required">
	<input type="button" value="If no value, click here to input NULL !" onclick="insertText('txt2', 'NULL');"> 
    </form>

.value代替.innerHTML设置<input>元素的value属性

控件的初始值。

<script type="text/javascript">
  function insertText(elemID, text) {
    var elem = document.getElementById(elemID);
    elem.value = text;
  }
</script>
<form>
  <input id="txt1" name="passport_no" style="width: 100px" required="required">
  <input type="button" value="If no value, click here to input NULL !" onclick="insertText('txt1', 'NULL');">
  <br>
  <br>
  <input id="txt2" name="hkid_no" style="width: 100px" required="required">
  <input type="button" value="If no value, click here to input NULL !" onclick="insertText('txt2', 'NULL');">
</form>

同时设置elem:的value

<html>
  <head>
    <script type="text/javascript">
      function insertText(elemID, text)
      {
        var elem = document.getElementById(elemID);
        elem.innerHTML = text;
        elem.value = text;
      }
    </script>
  </head>
    <form>
    <textarea id="txt1" name="passport_no" rows="1" style="width: 100px" required="required"></textarea>
    <input type="button" value="If no value, click here to input NULL !" onclick="insertText('txt1', 'NULL');">
    <br><br>
    <textarea id="txt2" name="hkid_no" rows="1" style="width: 100px" required="required"></textarea>  
    <input type="button" value="If no value, click here to input NULL !" onclick="insertText('txt2', 'NULL');"> 
    </form>
</html>

首先需要检查它是Input Tag还是Textarea。如果是文本区域,则可以使用innerHTML函数,但如果是Input标记,则需要使用.value函数


快乐编码
Rz

function insertText(elemID, text) {
     var elem = document.getElementById(elemID);
     console.log(elem.getAttribute("type"));
     // check elem is input or Text area 
     if (elem.tagName == "INPUT" && elem.getAttribute("type") == "text") {
         elem.value = text;
     }
     if (elem.tagName == "TEXTAREA") {
         elem.innerHTML = text;
     }
 }
<form>
    <input type="text" id="txt1" />
    <input type="button" value="If no value, click here to input NULL !" onclick="insertText('txt1', 'NULL');">
    <br><br>
    <textarea id="txt2" name="hkid_no" rows="2" col="3" style="width: 100px" required="required"></textarea>
    <input type="button" value="If no value, click here to input NULL !" onclick="insertText('txt2', 'NULL');">
</form>