I have a knockout value binded textarea like so:
<textarea class="form-control" data-bind="value: test" name="test" rows="4"></textarea>
However, when saving data with line breaks or extra spaces, upon next viewing of the page it displays it with the ASCII characters. Like so:
Overview being explained here in this box.
Test stuff test stuff.
When I look at the value in the database it does not have those characters:
Overview being explained here in this box.
Test stuff test stuff.
Indeed even in the view model before the data gets passed to the view everything looks correct:
Overview being explained here in this box.\n\nTest stuff test stuff.
And finally even when first entered, the knockout property pageModel().test() shows the text like this too:
"Overview being explained here in this box.
Test stuff test stuff."
So why does knockout finally render it with the ASCII characters? My KO model looks like this when the value is already input:
self.test = ko.observable('Overview being explained here in this box.
Test stuff test stuff.');
Okay, it's an MVC issue then, because I am calling it like so:
self.test = ko.observable('#Model.Test');
But I can't figure out how to get this to work, if I use Html.Raw the line breaks are interpreted correctly but then that breaks the javascript breaks because there is a space between lines without proper string ending.
I also try just escaping the \r\n characters:
self.test = ko.observable('Overview being explained here in this box.\\n\\nTest stuff test stuff.');
This doesn't remove the problem though, I still get the double
.
How the heck can I get this working right while still using the value binding? Because I am using knockout.validation, and I could make this work by using html binding and use a slight hack:
<textarea class="form-control" data-bind="value: test, event: { keyup: function(data, event) { data.test(event.target.value); } }" name="test" rows="2"></textarea>
But this completely breaks knockout validation for any textareas because html is a one way binding that doesn't get validated. So I still need to use the value binding.
How to get this working?
You're probably looking for
self.test = ko.observable('#HttpUtility.JavaScriptStringEncode(ViewBag.Test)');
or as you pointed out for .NET Core you'll need
#(JavaScriptEncoder.Default.Encode(question.Test))
Related
How can I pass html object properties into embedded ruby code in an html.erb file?
Lets say I have a ruby method A that accepts a string parameter(and also the return value of A is string). I think of scenarios like the following:
<input type="text" id="t" value="Leaves">
<%= A(document.getElementById("t").value) %>
Obviously I can't write code that way.
I want to pass the value/text of the textbox into method A and print A's return value into the html body. How can I do that?
Also, if I want to continuously check the value of the textbox and append A's return value(when passed the current value of the textbox to A) to the body of the document, what should I do? And if I instead wanted to set some paragraph p's text to this return value, what should I have done?
You can use a HTML parser like Nokogiri.
frag = Nokogiri::HTML.fragment('<input type="text" id="t" value="Leaves">')
frag.at_css('#t').attr('value')
But it seems like a rather silly and overcomplicated solution to something that most likely can be solved by not using HTML strings to pass around data in your views / helpers in the first place.
I have comments section in my application where users enter input in a text area. I want to prevent the line breaks they enter but also display html as a string. For example, if comment.body is
Hello, this is the code: <a href='foo'>foo</a>
Bye
I want it to be displayed just as above. The same with anything else, including iframe tags.
The closest I got is:
= simple_format(comment.body)
but it sanitizes html code and it's not displayed. Example: foo <iframe>biz</iframe> bar is displayed as:
foo biz bar
What should I do to achieve what I want?
Just use it without any method, it will be rendered as plain text:
= comment.body
Using your second example, the output will be:
foo <iframe>biz</iframe> bar
To make \n behave as <br>, you can use CSS:
.add-line {
white-space: pre-wrap;
}
And use it in your view:
.add-line = comment.body
Using your first example:
comment.body = "Hello, this is the code: <a href='foo'>foo</a>\n\nBye"
The output will be:
Hello, this is the code: <a href='foo'>foo</a>
Bye
Having done something similar in the past, I think you must first understand why HTML is sanitized from user input.
Imagine I wrote the following into a field that accepted HTML and displays this to the front page.
<script>alert('Hello')</script>
The code would execute for anyone visiting the front-page and annoyingly trigger a JS alert for every visitor.
Maybe not much of an issue yet, but imagine I wrote some AJAX request that sent user session IDs to my own server. Now this is an issue... because people's sessions are being hijacked.
Furthermore, there is a full JavaScript based exploitation framework called BeEF that relies on this type of website exploit called Cross-site Scripting (XSS).
BeEF does extremely scary stuff and is worth taking a look at when considering user generated HTML.
http://guides.rubyonrails.org/security.html#cross-site-scripting-xss
So what to do? Well if you checked in your DB you'd see that the tags are actually being stored, but like you pointed out aren't displayed.
You could .html_safe the content, but again I strongly advise against this.
Maybe instead you should write an alternative .html_safe method yourself, something like html_safe_whitelisted_tags.
As for removing newlines, you say you want to display as is. So replacing /n with <br>, as pointed out by Michael, would be the solution for you.
comment.body.gsub('\n', '<br />').html_safe_whitelisted_tags
HTML safe allows the html in the comment to be used as html, but would skip the newlines, so doing a quick replace of \n with <br /> would cover the new lines
comment.body.gsub("\n", "<br />").html_safe
If you want the html to be displayed instead of rendered then checkout CGI::escapeHTML(), then do the gsub so that the <br /> does not get escaped.
CGI::escapeHTML(comment.body).gsub("\n", "<br />")
In HTML I can do:
<textarea>
line 1
line 2
line 3
</textarea>
However, the same thing doesn't work with the JSF <h:inputTextarea>, as I have to specify the value attribute instead of the body. Is there a way that I can specify a multiline value? Ideally I would like to be able to do it as seamlessly as in HTML, ie with no \n and actually putting it onto multiple lines, for easy readability.
You could try this :
<h:outputFormat escape="false" value="Line 1<br/>Line 2" />
Which would render:
Line 1
Line 2
Note:The escape="false" means you can embed html, like lists etc...
or else we can even try like this:
Alternatively you could set readonly to true on the inputTextArea and set the rows attribute.
I Hope this will help you
Well, I couldn't find a way to include the textarea content directly into the .xhtml, while keeping the content on several lines. There's probably a way with some javascript by using a different tag and then copying it in or something, but I wanted to keep it fairly clean.
What I ended up doing was using the value attribute of h:inputTextarea and I populated it from my managedBean. I created text files of the content I wanted (they were quite big files) and loaded them into the managedBean property using a FileReader. When you assign them to the value of the h:inputTextArea, the \n etc are respected, so that it gives you the identical effect to if you had hardcoded the text into the .xhtml between textarea tags.
Form builder behaves unexpectedly when building a form within a table. It closes the form immediately.
Yes, I know that tables are generally bad. But in this case, I'm displaying line items for billing purposes, which is a pretty good use case for tables.
Each row is designed to be its own form that auto-submits on change.
View Source
I'm not sure if this is by design in Rails, or if it's a bug.
I get the whole opinionated software thing, but this behavior is a little extreme.
I promise that there are no bombs in my shoes. The framework should let me do what I want, even if you think it's stupid.
At this point I'm ready to copypasta the raw HTML myself. But, I really shouldn't have to.
What do you guys think (if that's not too gender normative)?
Your tool is acting correctly in this case, you are asking it to create a form under a tr.. when you should encase it in a th like you have for the Service, notes, and cost..
in short you can not have a "<%= form_for" directly under a tr.. move it into a th
I think the HTML generated by Rails would be the one you expect, it is the browser which parses the HTML which is having trouble with it. You can check that by using View Page Source instead of using Inspect Element to view the HTML generated.
My guess is the HTML from the view source would be something along the lines of:
<form class="submitless" action="/tickets/1294/labors/1090" method="post">
<td class="service">
<select>...</select>
...
</td>
</form>
But since this is not valid HTML, the browser might be having a hard time understanding it and is parsing it wrongly.
HI All,
I know this is bit strange question, but please suggest.
I want to create a link on website url content in input type"text" field not any other html tag,Is it possible and if yes how.
Regards & Thanks
Amit
I don't know whether I understood your question correctly or not. Based on my understanding I gave the answer. Feel free to raise your question. Nothing is impossible.
</input>
It displays a text box. You can enter any data into it. If you press enter key then it forwards the page to Google.com
You can use SPAN instead of INPUT. This also serve the same purpose.
<a href="http://www.google.com" ><span style="border:1px solid blue;" >Link</span></a>
This is unfortunately not possible in the way you've asked it in HTML 4 or below. Even with HTML5 which has several new INPUT TYPEs, including URL, it only does validation and has some other useful functions, but won't give you want you want.
You might look for some jQuery plugins that can help you do this, most use the same principals behind Rich Text or other online/web-based HTML WYSIWYG editors. I've had trouble locating them myself.
These 3 situations (that I can think of right now) are pretty much what you will face natively with HTML4 or below, as text in an actual HTML4 INPUT textbox is pure text. It is not html and therefore NOT clickable. Here are some variations:
The INPUT tag's VALUE attribute, also referenced as the corresponding DOM object's "value" property (which is basically what you've been doing, and the most you can hope for, if you decide that you MUST have the text that's ACTUALLY inside the textbox (because the text inside the textbox is the VALUE attribute, as I have it with "http://yahoo.com" in this example):
<input id="myTxtbox" type="text" value="http://yahoo.com">
where the INPUT's VALUE = "http://yahoo.com", which you can retrieve with:
in pure javascript:
document.getElementById("myTxtbox").value
in jQuery:
$("myTxtBox").val()
When your link/url is the text in between the and , i.e. the text/innerText of the textbox. This is useless for your question/scenario since it's not clickable, and more importantly NOT INSIDE the textbox. However, someone might want to use this to retrieve any text that you may be using as a label (if you're not using the <label> tag itself already that is):
<input id="myTxtbox" type="text">
http://yahoo.com
</input>
The textbox's text/innerText is NOT an attribute here, only a DOM object property, but can still be retrieved:
pure javascript:
document.getElementById("myTxtbox").innerText
jQuery:
$("myTxtBox").text() -- you would use this to capure any text that you may be using as a label (if you're not using the tag).
The result being: http://yahoo.com
When your link/url is the form of an ANCHOR () with an HREF to your url (and visible link text) in between the and , i.e. the innerHTML of the textbox. This is getting a bit closer to what you want, as the link will appear as, and function as an actual link. However, it will NOT be inside of the textbox. It will be along side it as in example #2. Again, as stated in example #1, you CANNOT have actual working HTML, and therefore a working 'link' inside of a textbox:
<input id="myTxtbox" type="text">
<a href="http://yahoo.com">
http://yahoo.com
</a>
</input>
Once again, similarly to example #2, the textbox's innerHTML is NOT an attribute here, only a DOM object property, but can still be retrieved:
pure javascript:
document.getElementById("myTxtbox").innerHTML
jQuery:
$("myTxtBox").html()
The result being: http://yahoo.com
You could simply do this :
<input type=text value="link" readonly>
So whenever somebody clicks the textbox, it works as a link, and since it's read only, there wont be any text input/change.
Be careful tho, for it wont look like a regular link and might cause confusion, or may be misinterpreted as a normal textbox.
This is how I did it with JavaScript and JQuery. This wraps the entire text field in a hyperlink, so essentially the entire text field is click-able, which may not be the functionality you are looking for. It worked for my purposes though.
The reason I didn't just use a $(nameTextField).click(function(){...}) structure is because the text field I'm using has the disabled attribute set, so click functions aren't fired. That's why I had to wrap the text field in a hyperlink.
// Make person name a hyperlink to page in new tab
var nameLink = "/exampleUrl/?initStudentId=$" + studentId;
$("#studentNameLink").replaceWith($("#studentNameLink").html()); // Unwrap any previously wrapped text fields
$(nameTextField).wrap("<a id='studentNameLink' target='_blank' href='" + nameLink + "'>"); // Wrap text field in anchor
$(nameTextField).css('color', '#326699'); // Make text blue
$(nameTextField).val(studentName); // Set text field value
Half the people here missunderstood it. The OP would like to have the content/value of the input fields to be hyperlinks instantly and NOT the fields themselves.
It is doable... although it's not an input field but the appearance acts like such one.
Use the following: contenteditable=true
HTML
<div contenteditable=true>
<a id=lnk style=-moz-appearance:textfield href=http://www.google.com>http://www.google.com</a>
</div>
or optionally -webkit-appearance ..depends
JavaScript
var lnk=document.getElementById('lnk');
lnk.addEventListener('click',()=>{
window.location.href = lnk.getAttribute('href');
});
http://jsfiddle.net/Dezain/jm9mzrzp/
You want someone clicking a textbox to actually be treated as a link click?
Sounds malicious to me but you could bind the focus event via javascript to a window.redirect().
I don't know if I get the question right. As I've understood you want to be able to type in a ...-tag into an input-field. No other tags should be allowed. You can achieve this by using PHP for example:
<!-- HTML-Code -->
<input type="text" name="link" />
// PHP-Code
$link = strip_tags($_POST['link'], 'a'); // Remove all other tags than the <a>-Tag...
Is that what you mean?
Yes, it is possible, but it's not that simple. You need to create div, or other tag you prefer, that will be always floating over your input, using CSS positions, and create anchor inside it.
For example, virtual keyboard img is embedded into input field that way on russian Google page (http://www.google.ru/)
Because of browser-compatibility it's not a simple task.
EDIT: Understood your question a little more. You still need first part of the answer, and you will need to handle keypress event inside your input. When symbol is entered you will need to update your floating div.
So now task is difficult even more. Maybe you should revise your model and not the code.