js-html - 属性中未设置类型的文本框值？答案

【问题标题】：js-html - typed textbox value not set in attribute?js-html - 属性中未设置类型的文本框值？
【发布时间】：2010-09-03 03:42:10
【问题描述】：

同学们，
我写了一些代码来保存网页的当前状态。当有一个文本框通过输入更改值时，该更改未在 html 代码中注册。即使我打电话：

object.value = 'x';

is 不会改变值。当我使用时：

object.setAttribute('value','x');

然后在 html 代码中注册更改。

循环遍历设置 onchange 属性的文本框不是解决方案，因为我有一些特殊的文本框，它们已经设置了 onchange 属性。

感谢您的帮助

function SaveHTML()
{
removeThis(get('Source'));
var newdiv = document.createElement('div');
newdiv.setAttribute('id','Source');
newdiv.style.position= 'absolute';
newdiv.style.top= (tempY-200)+'px';
newdiv.style.left= (tempX+30)+'px';
newdiv.style.backgroundColor = 'white';
var html=encodeURI(document.getElementsByTagName('body')[0].innerHTML);
newdiv.innerHTML='HTML:<br><textarea rows="20" cols="60">'+html+'</textarea><br><input type=button value=close onclick=removeParent(this)>';
document.body.appendChild(newdiv);
}

function LoadHTML()
{
removeThis(get('Source'));
var newdiv = document.createElement('div');
newdiv.setAttribute('id','Source');
newdiv.style.position= 'absolute';
newdiv.style.top= (tempY-200)+'px';
newdiv.style.left= (tempX+30)+'px';
newdiv.style.backgroundColor = 'white';
newdiv.innerHTML='HTML:<br><textarea id=code rows="20" cols="60"></textarea><br><input type=button value=cancel onclick=removeParent(this)> <input type=button value=load onclick=document.getElementsByTagName(\'body\')[0].innerHTML=decodeURI(get(\'code\').value)>';
document.body.appendChild(newdiv);
}

function get(Element)
{
return document.getElementById(Element);
}

function removeThis(obj)
{ 
try{
obj.parentNode.removeChild(obj);
}
catch (e) {
    return;
}
}

function removeParent(obj)
{
obj.parentNode.parentNode.removeChild(obj.parentNode);
}

【问题讨论】：

您的问题是为什么setAttribute 有效而o.value = ... 无效？

标签： javascript html dom

【解决方案1】：

嗯，这很奇怪。我不希望它表现得那样。很有趣。

您可以在保存 HTML 时简单地遍历每个输入字段，然后执行

object.setAttribute("value", object.value)

您还可以使用大型框架的事件处理功能之一，它们可以附加事件而不会覆盖旧事件。

【讨论】：

我在 FF IE Chrome 和 Safari 上测试了行为。只有 IE 具有预期的行为。

【解决方案2】：

setAttribute 和 getAttribute 不应该使用，因为它们不是标准，使用 .value 应该可以。但另一种方法是使用 jQuery 的 attr 方法。

$('#myID').attr('id', 'newID');
$('#myID').attr('value', 'newValue');

你也应该像这样使用正确的引号：

newdiv.innerHTML='HTML:<br><textarea rows="20" cols="60">'+html+'</textarea><br><input type="button" value="close" onclick="removeParent(this)">';

和

newdiv.innerHTML='HTML:<br><textarea id="code" rows="20" cols="60"></textarea><br><input type="button" value="cancel" onclick="removeParent(this)"> <input type="button" value="load" onclick="document.getElementsByTagName(\'body\')[0].innerHTML=decodeURI(get(\'code\').value)">';

要为特定事物设置 onchange，请尝试使用 jQuery 选择器：

$('#myID').onchange(function(){/* your stuff here */});

【讨论】：

我知道 JQuery 很常用，但是对于这个项目我不想使用它。不过还是谢谢。

【解决方案3】：

在 SaveHTML 调用中，我运行此函数。像魅力一样工作！

function TouchInputs()
{
var everything = document.getElementsByTagName('input');
var everythinglength = everything.length;
for(var i = 0;i<everythinglength;i++)
    {
        try{
            everything[i].setAttribute('value',everything[i].value);
        }
        catch(e){
                alert(e.message);
            }
    }
}

【讨论】：