如何使用 Javascript 更改活动文本输入的值？

Question

我正在尝试制作一个带有日期输入的表单。
但是，此输入是日期格式，我想在控件仍处于活动状态时更改值。
这是完整的代码：

 
// Javascript code

function add_value()
{
  var dataoriginale = document.getElementById("fin_mater").value;
  if(document.getElementById("fin_mater").value.length = 2)
    {
      document.getElementById("fin_mater").value=dataoriginale+'-';
    }
  else if(document.getElementById("fin_mater").value.length = 5)
    {
      document.getElementById("fin_mater").value=dataoriginale+'-';
    }
}

<!-- Code of the input -->

<input id="fin_mater" type="text" onchange="add_value();" name="fin_mater" maxlength="10" placeholder="DD-MM-YYYY"/>

但这只是在您退出控件时更新文本，我想知道如何在控件仍处于活动状态时运行此javascript功能。

谢谢。

Answer 1

您需要使用 onkeyup.

<input id="fin_mater" type="text" onkeyup="add_value();" name="fin_mater" maxlength="10" placeholder="DD-MM-YYYY"/>

来自docs

Execute a JavaScript when a user releases a key

同样在你的 if 你正在使用 =，你应该使用 ==

...
if(document.getElementById("fin_mater").value.length == 2)//==
...
else if(document.getElementById("fin_mater").value.length == 5)
...

Answer 2

你可以使用 keypress():

$(document).ready(function()
{
    $( "#fin_mater" ).keypress(function() {
  var dataoriginale = document.getElementById("fin_mater").value;
  if(document.getElementById("fin_mater").value.length == 2)
    {
      document.getElementById("fin_mater").value=dataoriginale+'-';
    }
  else if(document.getElementById("fin_mater").value.length == 5)
    {
      document.getElementById("fin_mater").value=dataoriginale+'-';
    }
    });
});

Fiddle

Answer 3

首先让我们让代码更像 "javascript" :)

 
// Javascript code
function $(id) {
    return document.getElementById(id);
}

function add_value(event) {
    var dataOriginale = $("fin_mater").value, 
        len = dataOriginale.length,
        key = event.keyCode || event.charCode;

    // Allow BACKSPACE and DEL
    if (key === 8 || key === 46) {
        return true;
    }
    
    if(len === 2 || len === 5) {
        $("fin_mater").value = dataOriginale + '-';
    } 

    return false;
}

<!-- Code of the input -->

<input id="fin_mater" type="text" onKeyUp="add_value(event);" name="fin_mater" maxlength="10" placeholder="DD-MM-YYYY"/>

如果想在输入数字时自动附加“-”，可以监听文本框的"onKeyUp"事件而不是"onchange"。

PS：可以使用键码来限制只输入数字，也可以做一些校验。

Answer 4

在您的一些帮助和一些文档的帮助下，我终于找到了这个，它在支持 javascript 的每个浏览器上都能完美运行。

$(document).ready(function(event)
    {
    $( "#fin_mater" ).keypress(function(event) {
 var dataoriginale = document.getElementById("fin_mater").value;
 if(event.keyCode != 8)
 {
  if(document.getElementById("fin_mater").value.length == 2)
   {
   document.getElementById("fin_mater").value=dataoriginale+'-';
   }
  else if(document.getElementById("fin_mater").value.length == 5)
   {
   document.getElementById("fin_mater").value=dataoriginale+'-';
   }
 }
    });
});

谢谢大家！

如何使用 Javascript 更改活动文本输入的值？

How to change the value of an active text input using Javascript?

html

javascript

forms

onchange