HTML輸入 - 通過innerHTML或XMLSerializer獲取值

我在html頁面上有一個輸入框。我知道我能得到公正的價值，但我想整個輸入字符串，即，但與價值存在：HTML輸入 - 通過innerHTML或XMLSerializer獲取值

<input id="myInput" value="my entry that I just typed in"/>

我已經試過的innerHTML，我已經試過的XMLSerializer等

VAR htmlDiv = document.getElementById（'myInput'）; var str = s.serializeToString（htmlDiv）;

該值始終爲空。

如果您想知道爲什麼要這麼做 - 這是因爲這是我的實際情況是關於60個輸入的一個簡單示例，它是我希望發送到XSLT轉換的HTML字符串的所有部分。該部分的工作方式像gangbusters，我只需要使用完整的值來獲取HTML。

另一個相關的問題是，innerHTML有一個討厭的習慣，在輸入框的末尾擺脫/，這會拋出XSLT轉換。

來源

2017-07-13 George Helmke

試試這個：

console.log(document.getElementById("myInput").outerHTML);

<input id="myInput" value="my entry that I just typed in"/>

如果你想添加/結尾：

myVar = document.getElementById("myInput").outerHTML; 
 
if(myVar.charAt(myVar.length - 1) !== "/"){ 
 
console.log(myVar.slice(0, myVar.length-1) + "/>"); 
 
}

<input id="myInput" value="my entry that I just typed in"/>

來源

2017-07-13 20:01:17

第一個技巧沒有工作，第二個技巧。什麼不會使它對外部HTML（或內部）是用戶對輸入的更改。我認爲這只是在DOM中。這是代碼：

–

我很高興它的工作 –

最後我做了以下內容：與序列化XMLSerializer，它解決了/問題。我剛剛從DOM中獲得了這些值，並自己插入了它們。

function htmlCleanup(htmlDiv) { 

    //serialize the html. It will lack the latest user changes in the inputs. 
    var s = new XMLSerializer(); 
    var str = s.serializeToString(htmlDiv); 
    var lines = str.split("\n"); 
    //get all of the inputs in the div 
    var inputs = htmlDiv.getElementsByTagName('input'); 

    //Here we put in the latest values 
    var inputIndex = 0; 
    for (var i = 0; i < lines.length; i++) { 
     var line = lines[i].trim(); 
     if (line.indexOf('<input') >= 0) { 
      var value = inputs[inputIndex].value; 
      lines[i] = fixInputValue(line, value); 
      inputIndex++; 
     } 
    } 

    str = lines.join('\n'); 
    //Some other weird aftertaste stuff that needs fixing. <tbody> is added to tables - wrongly. 
    //the div at the top is also a problem. 
    //Then we turn it all into proper xhtml for the trip back to the server. 
    var contents = str.replace('<div xmlns="http://www.w3.org/1999/xhtml" id="documentEditBody">', ''); 
    contents = contents.replace(/<tbody>/g, ''); 
    contents = contents.replace(/<\/tbody>/g, ''); 
    contents = '<?xml version="1.0" encoding="UTF-8"?><html><head></head><body><div>' + contents + '</body></html>'; 

    return contents; 
} 

function fixInputValue(input, value) { 
    var valuePos = input.indexOf('value'); 
    var result = ""; 
    if (valuePos > -1) { 
     for (var i = valuePos + 7; i < input.length; i++) { 
      var chr = input[i]; 
      if (chr === '"') { 
       var last = input.substring(i + 1, input.length) 
       result = input.substring(0, valuePos - 1) + ' value="' + value + '" ' + last; 
       break; 
      } 
     } 
    } 
    return result; 
}

來源

2017-07-14 09:21:39

HTML輸入 - 通過innerHTML或XMLSerializer獲取值

回答

相關問題