Html-Encoding Lost When Attribute Read from Input Field

HTML-encoding lost when attribute read from input field

EDIT: This answer was posted a long ago, and the htmlDecode function introduced a XSS vulnerability. It has been modified changing the temporary element from a div to a textarea reducing the XSS chance. But nowadays, I would encourage you to use the DOMParser API as suggested in other anwswer.

I use these functions:

function htmlEncode(value){
  // Create a in-memory element, set its inner text (which is automatically encoded)
  // Then grab the encoded contents back out. The element never exists on the DOM.
  return $('<textarea/>').text(value).html();
}

function htmlDecode(value){
  return $('<textarea/>').html(value).text();
}

Basically a textarea element is created in memory, but it is never appended to the document.

On the htmlEncode function I set the innerText of the element, and retrieve the encoded innerHTML; on the htmlDecode function I set the innerHTML value of the element and the innerText is retrieved.

Check a running example here.

Unable to read attribute set by Razor through jQuery, why?

Try to pass this to myHandler:

@foreach (var item in Model) {
<div class="row">
  <label class="col-md-offset-3 col-md-9">
    <input type="radio" class="myclass" id="@item.Id" name="myname" onchange="myHandler(this)" value="@item.property" data-mydata="@Html.Encode(item.property2)"/>
    @item.Name
  </label>
</div>
}

<script>
  function myHandler(t) {
    var myvar = $(t).data('mydata');
    console.log(myvar);
    console.log($("input[name='myName']:checked")[0]);
  }
</script>

Javascript not reading single character from input field

In place of onkeypress, use onkeyup. The reason why it is not working with onkeypress is because it generates console when the key pressed. Till then, the value has not entered the input field, meaning that it'll give value which is already there. Using onkeyup executes, when the character gets typed in the input field.

document.getElementById("v1").onkeyup = function() {
  myFunction()
};

function myFunction() {
  console.log(document.getElementById("v1").value);
  document.getElementById("v1").style.backgroundColor = "red";
}

<input type="text" id="v1" /><br>
<input type="text" id="v2" />

Getting proper HTML encoded values from an input textfield

Although you didn't specify any programming language, you can use the htmlspecialchars() function in PHP for this. You would just need to use:

echo htmlspecialchars($_POST['inputname']);

See this page for more info.

Javascript fetch value from textarea and fill in different input field dynaically

Suppose the textarea id is 'myTextArea', and the input id is 'myInput'.
Using an Event Listener and the onKeyUp event(or whichever event suits your needs), you could simply do:

const myTextArea = document.getElementyById('myTextArea');

const myInput = document.getElementyById('myInput');

myTextArea.addEventListener('keyup', () => myInput.value = myTextArea.value);

Why url is converted into sub-url in HTML when passing through input field?

If you put a text inside the "href" attribute of a link, and that text doesn't have a protocol at the beginning (either http or https, or similar) the browser will append it to the end of the current page url.

You can see that in action in this JSFiddle.
Since you were testing it on your pc by opening the file in a browser, you see the url you mentioned.

To fix it, just check if the text has a protocol or not, and insert it when necessary. A very basic implementation could look like this:

if (!elem.startsWith("http")) {
  elem = "//" + elem;
}

This fiddle will show you how.

Here it is also a better implementation using regex:

let reg = /^http(s)?:\/\//g;
if (!elem.match(reg)) {
  elem = "//" + elem;
}

Html-Encoding Lost When Attribute Read from Input Field