i know <textarea name="textarea" disabled="disabled">dsds</textarea> can disable write in the textarea ,
but how to disable one line i want to disable in the textarea ?
not all line
thanks
That's not possible without JavaScript, even then:
You need to enable contentEditable
You need to write your own editor...
You need to figure out what happens if someone deletes or inserts a line and therefore moves the disable one around
You need to figure out what to do when someone hits enter in the line above the disabled one or backspace at the beginning of the line below the disabled one...
To sum it up, a textarea is the wrong approach here, better use multiple input's for whatever you want to do here, of course you will need to make it look like it's one textarea and you'll still need some JavaScript to make return work as expected (?), but then again you didn't specify what you want to do with this stuff.
Yes, use multiple input texts appear like a single text area, let's call it fake text area. That way disabling one would be easy.
Do not put any margin in between them and no border, all having same width.
Assign incremental ids to each one - like input-1,input-2 etc.
If you want to prefill some text into the fake textarea, calculate the maximum length that can be accomodated into a single input and fill line by line using javascript (jquery would be better).
When cursor is at the end of an input text and enter is pressed, take cursor to next text input. Define a function for every such possibility and call it.
On posting the form, append the input values together to get the actual value of the faked text area.
I guess there may be difficulties in faking a scrollbar for such a textarea but once implemented, should work fine. Any existing plugins like this?
Updates
- For handling cursor positions, refer these things. I did not try myself but may be useful - Jquery Caret position and How to get cursor position in textarea and you can apply the cursor position getting-setting logics. Somehow try to get the actual click position and force the cursor to stay there.
Related
In the past, when you set the value of a textarea using javascript, Firefox allowed the user to undo this change (by pressing ctrl+Z, for example). However, this no longer works, and there doesn't appear to be any decent alternatives.
I've tried using document.execCommand to modify the textarea, but this requires you to select the text that you want to modify, and it doesn't appear to be possible to automatically select text in a textarea.
I've also heard about document.createEvent("TextEvent") but I can't find much information about this. It appears that you can only insert text at the cursor, and I need to delete text as well.
Creating my own undo/redo system and capturing ctrl+Z/Y presses is not an acceptable solution.
Similar questions have already been asked here, but they involve only inserting text at the cursor, not changing the value of the textarea entirely.
You can use the setSelectionRange API to manually manipulate the textarea's selection. Get the original values from textarea.selectionStart and textarea.selectionEnd.
We're looking for a certain type of control, preferably with a Bootstrap implementation. We don't believe it's really uncommon, but we might be wrong.
It's essentially a listbox, but also:
It's like an editable combobox, but without a dropdown.
Like a tag input/pillbox, but vertical, with a more traditional style, and directly editable.
Like an expanding grid, but with a single column.
Like a series of vertically attached text input field boxes, on steroids.
Like a text area, but properly structured and expanding.
The ultimate goal is to be able to quickly and efficiently input a bunch of values (phone numbers, ...) without leaving the keyboard, while allowing the user to edit or remove existing values painlessly. (The form is relatively large and part of a LOB application.)
Does this control have a name?
Does anyone know of a Bootstrap plugin that provides such a control?
If not, then we're not exactly sure about how to proceed, would you have any pointers for us so that we can implement this in a straightforward way? (Is it a good idea to start with a series of text input fields for example?)
Details:
It's essentially a list,
It starts as something that looks very much like a simple text input field,
When the user presses ENTER, a new row is added below and the cursor is moved to it (the list expands dynamically),
When the user presses TAB, the cursor is moved to the next control,
(Optional) When the user presses the UP or DOWN arrow key, the cursor jumps in the previous or next element, respectively,
Each row is directly editable (the user can click inside any of them and change any character, even in the middle, thus without deleting the element first),
(Optional) There can only be one empty row at the end,
(Optional) If the user focuses another control (for example by pressing TAB) or another element (for example by using the arrow keys or by clicking), the current element is removed if it's empty,
(Optional) In addition to pressing ENTER when the cursor is in the last field, the user can press a button to add a new empty element if the last element is not empty,
There is only one column (no need for a column header),
(Optional) An inline label should be displayed in the last element if it's empty,
There is a button next to each element that allows the user to remove them,
(Optional) When the user presses DELETE twice at the end of an element, the focused element is removed (it must be pressed twice so that a user who keeps the button pressed to delete a bunch of characters doesn't remove the element by accident if that wasn't her intention -- this requirement can be formulated in other ways),
(Optional) The user can undo a delete operation,
(Optional) If the number of elements exceeds a certain limit, a scroll bar appears and the height of the control is fixed at that limit,
(NTH) If the number of elements exceeds a second (normally higher) limit, the list is paginated.
As I don't know any control that suits your needs, I'll try to suggest some implementation options:
Contenteditable:
Take a look at the contenteditable attribute - demo here.
This won't match all your requirements (point 12 is the main blocker here), but it's pretty nice OOTB, and (according to MDN) cross-browser.
The demo provided above may be a good starting point for your own solution.
One input per line:
The other approach will be to use one input for each of the lines.
I've provided simple demo that adds "new line" as enter is pressed.
Although this implementation will also need a bit of boxing with keyboard events, this one-element-per-line model seems to better reflect your bussiness needs and is pretty flexible.
I'd be afraid about performance with bigger data sets, though.
This can be also mixed with contenteditable approach (e.g. list of editable <li> elements), but it doesn't seem to bring in any benefits. It even brings some problem, because contenteditable won't restrict number of lines by default; with regular input, you have a guarantee that one element contains one line.
I am trying to use a text area to gather input from the user and then when the user clicks a done button. I grab the textarea value and insert it into Raphael text object. Easy enough. However, I realized after typing out a paragraph in the text area that a number of things occur. Here are a couple of things that occur.
Although in the text area it looks like its on multiple lines it actually just puts it all on one line. (Makes sense after thinking about it for two seconds)
When I hit enter it puts the text onto a new line but if I hit enter and add mulitples new lines above the text it just ignores them.
So basically what I am asking is does anyone know the best way or any way that is more consistent and efficient to take textarea text and formatting it properly to look the same way in Raphael. Tips tricks would be appreciated.
I've had a horrible problem that I've been wracking my brain for the past two days for, and have yet to come up with a solution. As such, I think this needs someone smarter than I to accomplish.
What I'm trying to build is a textbox that simulates that of Facebook's; essentially, the tagging function.
Now if you've used Facebook, you'll have noticed that Facebook allows you to tag people in a comment/post, simply by typing in their name and selecting from a dropdown list. The name of the person you've selected then appears in highlighted text in that very textarea. I've successfully managed to create and populate the dropdown list a combination of JQuery and AJAX, but the tagging process itself is the stumper.
Once a dropdown item has been selected (by Enter or clicking), the query text will be replaced with the tagged name. Now, it's difficult to see how one can give text in a textarea any kind of a highlight, so I've discovered (by inspecting elements in Google Chrome and deleting the textarea node) that the textarea itself is transparent, and there is a white div below "simulating" the text. Highlighted words are placed in a tag with custom CSS, which gives it that blue background. All of this I've found out myself, and I have successfully simulated this - but I can only do one tag.
Now I've investigated further and found an input type="hidden" element, of class "mentionsHidden". This input element has a value attribute, which dynamically populates itself based on the content of the textarea. So if I typed "ABC", the value of the element becomes "ABC". If I included a tag, say "hi [Rei]!" (where the name in [] is the tag), the value of the element becomes "hi #[member_id:Rei]!".
So I HAVE done my homework. But here comes the part I can't figure out.
I can't figure out how exactly to dynamically populate the hidden input element with the value of the textbox. It's obvious that the underlying div giving the blue tag background is populated from the input element. But the input element is giving me a headache.
You see, I can't do the following:
-I can't simply "copy" the entire value of the current textarea and "paste" it into the input element's value, because that would override any previously tagged people in the input element (after all, the textarea can only possess plaintext).
-Even though I CAN locate the current index of the caret (the flashing black line in the textarea that tells you where you're going to be typing into), that's only for the textarea. Index position 10 in the textarea and in the input element's value might be different things, because this way of "tagging" people will result in adding additional characters to the value String.
-I can't simply do a "replace" of the text I am intending to replace, because there might be other instances of that same text in other parts of the value String.
I know it's a very long and confusing post, but I do hope you get what I mean. I really need a solution and I don't want to use contenteditable, because it's only for HTML5 and some older browsers might not support it.
Yours,
Rei
I hope you were able to come up with, or find, a solution to your problem. Since there doesn't seem to be one here, i'd like to offer one for and anyone who might stumble upon this (as well as you if my assumption was incorrect).
You are going to need to maintain explicit locational data of each existing mention in the textarea in the order in which they appear. If, after a modification of the content in textarea, the position of a mention in it is changed, you will need to determine which appearance of its value, if any, will be used to represent it, and appropriately update the locational data of the mention.
With such a collection of data, it becomes trivial to construct the value of mentionsHidden, though the existence of such data makes the element unnecessary.
Mentionator is an existing, robust solution which takes this approach in providing the functionality you are trying to recreate. Considering it is well-structured, easy to follow, and copiously commented, it should be of use to you as either out-of-the box solution or reference material to cite as you roll out your own. It is maintained by yours truly :) .
I have seen how to have multiple autocompletes in a single textarea, but what I want to due is have something that can select a term in the middle of the textarea, or more precisely wherever the cursor is/was in the textarea. Most solutions I have seen only work if the user is working on the end of the input string. I would like to have something along the lines of being able to start with the string:
"#George stepped on #foot."
then go back to the middle of the string and start typing to change it to this:
"#George stepped on #Fredrick's #foot. according to #Mary"
and have #Fredrick and #Mary each separately show up as an autocomplete option.
for the specific use I want this functionality for, the autocomplete will happen on character strings that start with either a "#" or a "#" symbol, but they will not necessarily be the first or last of the given symbol.
I am using javascript and jquery-ui for this task. this is for use on mobile devices so the position of the autocomplete will always just be at the bottom of the text area.
I'm actually implementing something very similar. I've looked at Google+ and they're using contenteditable for Chrome and some iframe hybrid for Firefox.
I've had moderate success with rangy for getting the current selection.
Things I haven't solved yet:
Properly detecting when the users starts typing # or #, this is harder than it seems, especially if you're injecting HTML in the input area.
Getting the x,y position of the current selection so you can position the auto-complete suggestions. Supposedly rangy can do it already but it's not in the official release yet (there is a working demo though).
I found out that I can do pretty much every thing I wanted by using the textarea.selectionStart value, and then cycling back from that index to the start of the tag, and then using selectionStart again to find the end of the tag. the conditions for when to stop increasing/decreasing the indices for the start and end of the tag can be a little complex, for mine it checks that it does not go beyond the start/end of the textarea text, or for the start of a tag with "#", "#" or a space. to replace the text when you have made your selection uses pretty much the same process to find the text, and then replaces the text with the selected tag. and sets the cursor after replacing the text, by setting the cursor to the start position of the tag offset by the length of the selected tag.