javascript - 如果其他为空，则将表单字段的值设为空白

Question

我环顾四周，找不到这样的东西。我有一个包含日期的字段。旁边是一个保存小时数的。

我需要 javascript 在单击时评估日期字段，如果该字段为空白，则自动将文本框的值清空到它的左侧。

我的表单的部分代码如下所示：

  <td>Day One:</td>
    <td width="250"> <input type=date name="dayone" onClick="document.getElementsByName('hours1')[0].value=8;" /></td>
    <td>Hours: (max 8) <input type="text" name="hours1" id="hours1" class="smalltext" ></td>

该 onclick 只是默认使用“8”填充文本字段。因此，如果有人改变主意并从另一个表单字段中清除日期，我几乎需要一些东西来消除这种情况。

谢谢您的帮助！

Answer 1

你最好保持你的 HTML 干净并使用eventListener-s - DEMO

HTML

<td width="250">
    <input type=date name="dayone" />
</td>
<td>
    Hours: (max 8)
    <input type="text" name="hours1" id="hours1" class="smalltext" />
</td>

JS

document.getElementsByName('dayone')[0].addEventListener("click", function() {
    document.getElementsByName('hours1')[0].value = 8;
}, false);

document.getElementsByName('hours1')[0].addEventListener("keyup", function() {
    if ( this.value == '' ) {
        document.getElementsByName('dayone')[0].value = '';
    }
}, false);

Answer 2

尝试这个

<script>
   function clearinput(){
      var el = document.getElementById('hours1');
     el.value = '';
}
</script>

见工作小提琴

Answer 3

更改代码以添加 onblur 事件处理程序

   <td width="250"> <input type=date name="dayone" onblur="checkValue" onClick="document.getElementsByName('hours1')[0].value=8;" /></td>

并编写处理程序

function checkValue()
{
    var dayValue = document.getElementByName('dayone')[0].value;
    if(dayValue != '')
    {
       document.getElementByName('hours1')[0].value = '';    
    }
}