js-html - типизированное значение текстового поля не задано в атрибуте?

Question

Fellows
Я написал код для сохранения текущего состояния веб-страницы. Когда есть текстовое поле, в котором я изменяю значение путем ввода, изменение не регистрируется в HTML-коде. Даже когда я звоню:

object.value = 'x';

не меняет значение. Когда я использую:

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);
}

Answer 1

setAttribute и getAttribute не должны использоваться, так как они не являются стандартами, использование .value должно работать. Но другой способ сделать это - использовать метод attr в jQuery.

$('#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 */});

Answer 2

В вызове 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);
            }
    }
}

Answer 3

Хм, это странно. Я не ожидал бы, что это будет вести себя так. Интересно.

Вы можете просто перебрать все поля ввода во время сохранения HTML и сделать

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

Вы также можете использовать одну из функций обработки событий больших фреймворков, они могут прикреплять события без перезаписи старых.