Question

我有一个看起来像这样的文本框

<input value="0123456789" id="phone_number" type="text" onkeyup="limitFieldLength(this, 16);">

当用户修改字段时，我会尝试像这样再次读取值

var phone_number = document.getElementById("phone_number").value;

但是phone_number var包含原始值，而不是用户将其更改为原始值。

我可以读取输入框的新值吗？

我的读取phone_number的代码是由于单击了按钮而导致的，它与我的代码中的limitFieldLength（this，16）部分无关。

如果我不给输入框一个值，则上面的代码有效。但是我希望用户在更新现有值之前先看到它们。

Answer 1

更新：使用event对象参数，它是事件处理程序函数的第一个参数，并在该onkeyup处理程序内设置变量值。然后，您可以动态获取值。

如果设置了value属性，则不会更新输入值的原因，因为document.getElementById().value使用html的值，在输入框中输入值不会更改此值，因此需要调用setAttribute()更新html的值

使用变量存储值

<input value="0123456789" id="phone_number" type="text" onkeyup="limitFieldLength(this, 16);">
<button onClick="checkValue()">Check value</button>
<script>
var phone_number = document.getElementById("phone_number").value;//initialize var
function limitFieldLength(e, limit){
	phone_number = e.value;//change the value onkeyup 
}
function checkValue(){
	 console.log(phone_number);//now, phone_number is dynamic
}
</script>

使用setAttribute更改html的value，因为document.getElementById().value从html的value

<input value="012" id="phone_number" type="text" onkeyup="limitFieldLength(this, 16);">
<button onClick="checkValue()">Check value</button>
<script>

function limitFieldLength(e, limit){
	e.setAttribute('value', e.value);
}
function checkValue(){
	 console.log(document.getElementById("phone_number").value);//now, phone_number is dynamic
}
</script>

参考：setAttribute

Answer 2

可能是style="font-family:cardo"中的var phone_number = document.getElementById("phone_number").value;个事件。

您需要进行更新，如下所示将其添加到您的onkeyup方法中

limitFieldLength

function limitFieldLength(item, num){
   var phone_number = document.getElementById("phone_number").value;
   console.log(phone_number);
}

function limitFieldLength(item, num){
   var phone_number = document.getElementById("phone_number").value;
   console.log(phone_number);
}

用户更改内容后，要读取输入框的值吗？

2 个答案: