I am using tag-it for my application. My requirement is that I should create tag-it tags and put these tags in a textarea element. I am choosing textarea over input because textarea can support newline.
I have gone through http://aehlke.github.io/tag-it/examples.html, but I notice that it supports only input element. I have also played around with the code and noticed the same.
Does tag-it work on textarea HTML element?
Looking forward to your response
The tag-it library works on input elements. One would, perhaps, have to modify their library in order to accommodate the textarea element.
Another alternative for tag-it would be to use tageditor library https://goodies.pixabay.com/jquery/tag-editor/demo.html as they support textarea HTML elements as well
Related
How to use tags-input of bootstrap with textarea? I have applied data-role="tagsinput" against the textarea. But tags-input is not working whereas same code is working for input type="text".
Support is not provided for the Textarea element. It is better to use the Input element for the Taginputs.
See here for reference:
https://github.com/TimSchlechter/bootstrap-tagsinput/issues/38
I am using select2 in tagging mode to create and edit tags. There is an annoying behavior which is that there is a delay between when the page loads and when the tags appear. Since the tags can spill onto two lines, after the tags appear the whole page readjusts when the content below the tags box is pushed down.
The delay is caused by select2 converting the input HTML tag into the necessary HTML elements for each tag.
The delay could be avoided if the select2 didn't generate the HTML for the tags, but instead I generated it on the server-side and it was included in the original page load. Then the position of elements below the tags field would never change.
Is there a way to have select2 attach itself it existing - pre-rendered - HTML, rather than creating the HTML itself?
Does anyone know of a tag field components that supports this? All of the components I have seen start with an input tag and then generate the HTML dynamically using Javascript.
I could not find a satisfactory answer, so I created a JQuery plugin specifically for my use case: https://github.com/k1w1/rendered-multi-select
It has Rails helper to render the HTML for the control on the server, then the Javascript events are attached when the page loads. This results in faster and flicker free loading.
I'm thinking of adding jqueryUi autocomplete to my site, few questions I can't find an answer to:
- Can I remove/replace the the ul tag which holds the responses? I managed to replace the li tags with tr but those are not suppose to be inside a ul tag
Please refer following link: may be this is useful for you.
How to change input type dynamically using jquery or javascript
With a grails app and from a local database, I'm returning some text in a xml format.
I can return it well formed in a <textarea></textarea> tag with the correct indenting (tabulation, line return,...etc.)
I want to go a bit further. In the text I'm returning, there are some <img/> tags and I'd like to replace those tag by the real images themselves.
I searched around and found no solution as of now. I understood that you can't add an image to a textarea (other then in a background), and if I choose a div tag, I won't have the indenting anymore (and therefore, harder to read)
I was wondering if using a <g:textField/> or an other tag from the grails library will do the trick. And if so, How can I append them to a page using jquery.
For example, how to append a <g:textField/> in jquery. It doesn't interpret it and I get this error
SyntaxError: missing ) after argument list [Break On This Error]...+doc).append("<input type="text" id="FTMAP_"+nb_sec+"" ...
And in my javascript file, I have
$("#FTM_"+doc).append("<g:textField id='FTMAP_"+nb_sec+"' ... />
Any possible solutions ?
EDIT
I did forget to mention that my final intentions are to be able to modify the text (tags included) and to have a nice and neat indentation so that it is the easiest possible for the end user.
You are asking a few different questions:
1. Can I use a single HTML tag to include images inside pre-formatted text.
No. You will have to parse the text and translate it into styled text yourself.
2. Is there a tag in the grails standard tags to accomplish this for me?
No.
3. How can I add grails tags from my javascript code.
Grails tags are processed on the server-side, and javascript is processed on the client. This means you cannot directly add grails tags via javascript.
There are a couple methods that can accomplish the same result, however:
You can set a javascript variable to the rendered content of a grails tag. This solution is good for data that is known at the time of the initial request.
var tagOutput = "${g.textField(/* etc */)}";
You can make an ajax request for the content to be added. Then your server-side grails code can render the tags you need. This is better for realtime data, or data that will be updated more than once on a single rendered page.
When I enter a text with line-breaks and long sentences, I don't want to see a wrapped or without line-breaks version. What is the CSS style to accomplish this? So far I tried white-space property but none gives the result I want.
You probably want the wrap attribute of the textarea tag. Have a look at this page: http://www.tizag.com/htmlT/htmltextarea.php
I'm not 100% sure what end result you want, but if you look at the options and explanations given via that link, you should be able to choose the one that fits your needs.
As #erik said, the way to do this is to use the wrap attribute on the tag itself, i.e.:
<textarea wrap="off"></textarea>
I just wanted to note, in case you're finicky about HTML validation, that the wrap property of textarea isn't part of any HTML standard.
Unfortunately, this is the only way to do this since the white-space CSS property, as you've discovered, doesn't work quite like you would expect when it comes to <textarea> elements.
Via Sitepoint:
Internet Explorer [...] The values normal and pre behave like pre-wrap on textarea elements. The value nowrap behaves like pre-line on textarea elements.
Firefox versions up to and including 3.0 don’t support the values pre-line and pre-wrap (although -moz-pre-wrap is similar to the latter). The values normal, nowrap, and pre behave like pre-wrap on textarea elements.
Opera 9.2 and prior versions don’t support the value pre-line. The values normal and pre behave like pre-wrap on textarea elements. The value nowrap behaves like pre-line on textarea elements.