jQuery将值写入输入字段的“值”属性

Question

我有一个输入字段，输入text类型：

<input type="text" id="show-val" value="">
<button id="get-val">Val</button>

在按钮单击上，它从其他地方获取URL，我需要将值放入文本字​​段的value属性中。

我能做的是：

$('#get-val').on('click', function(){
    var url = 'http://example.com/'; //suppose this is our grabbed URL
    $('#show-val').val( url );
});

但是，如果您检查输入文本，则可以看到它不是将url写入value属性，而是将值粘贴到文本字段中。

我试过的

$('#get-val').on('click', function(){
    var url = 'http://example.com/'; //suppose this is our grabbed URL
    $('#show-val').prop( 'value', url ); //failed
    $('#show-val').prop( 'placeholder', url ); //passed
});

输出为：

<input type="text" id="show-val" value placeholder="http://example.com/">

为什么我无法编写文本字段的value属性？ 我该怎么写呢？

Answer 1

prop()函数用于设置属性值，如checked ， disabled 。 您应该使用val()或attr()函数在HTML表单字段中设置值。

例子：

$('input#show-val').val(url);

要么

$('input#show-val').attr('value', url);

Answer 2

值是一个属性，因此$('#show-val').val(url); 是正确的。

但是，如果要修改value属性，请使用$.fn.attr( attributeName, value)

为匹配的元素集设置一个或多个属性。

码

$('#show-val').attr('value', url);

Answer 3

您可以通过以下方式设置value属性：

$('#show-val').attr('value', url );

但

$('#show-val').val( url );

也可以设置value但不能设置您想要的方式。

Answer 4

这将起作用：

$("#show-val").attr("value",url);