I'm creating something like MySQL cmd and to have complete design, I want to replace insertion point (that blinking line) with underline sing. Any tips?
If you were hoping this would be easy, the bad news is that there simply isn't a quick and simple way to do this -- the text cursor is not something you can just change with a couple of lines of javascript or CSS.
If you really want to do this, you're going to need to write your own entire text input system in javascript -- display the cursor yourself, wait for key presses, print them to the screen, handle anything like word-wrapping manually.... it's a fair bit of work.
Fortunately, others have already done this work and made it available to share, so I suggest your best starting point would be to take a look at some existing examples and see how they've done it.
Here's one I found with a quick bit of googling: http://terminal.jcubic.pl/. There are plenty of others you could try as well though.
Hope that helps.
This is what you need to do.
Make input text field invisible, so usable but invisible.
copy its content
render it to another div.
and and add a custom box or whatever...
Styling text input caret
Hide textfield blinking cursor
How about:
textarea{
cursor:url(underlineimage.png),auto;
}
Replace textarea with whatever element you want the cursor to be changed on. You will need to create a custom image of what you want your cursor to look like.
Related
I'm using an image annotation tool for a website I'm working on, and I need to type text onto the canvas using the paper.js PointText object. That part is pretty easy. I'd also like to be able to type with a visible cursor, and edit, create/change multiple lines, save it, and edit it again.
It's the part with typing with a cursor and editing in the middle of it that I'm wondering if it is even possible. Right now, I can type and delete letters, but only at the end of the text I've already created. I want to edit in the middle without deleting anything.
I'm not posting much code because my question is theoretical, and I haven't been able to find any code to try, except for the jQuery attribute contentEditable.
$(text).attr('contentEditable');
where text is a paper.PointText(position) object at position event.point.
Thanks!
You can try placing a contenteditable div over the canvas when you click on the PointText.
Here's an example:
http://jsfiddle.net/maitreyjukar/jz9Lu7wf/3/
Currently paper.js does not support word-wrap for PointText. They might provide support for it in AreaText which, hopefully, should be available shortly.
JSBin here: http://jsbin.com/cusisidoja/1/edit?html,js,output
I'm trying to POC a context menu that will pop up given certain keywords are entered in a textarea element. The idea is to implement functionality similar to the way code completion drop-downs work in an IDE.
I realize the scope of this project so the details of the keywords and menu contents aren't important right now. What I'm trying to figure out is how to locate the caret position as the user is typing.
So stepping back and breaking the problem down into its most fundamental component:
How can I get the caret position of a textarea in terms of x,y coordinates that are meaningful to CSS styling?
I threw together a JSBin with (what I believe to be) a decent shell for watching/updating the scope of a div when text is changed in the textarea: http://jsbin.com/cusisidoja/1/edit?html,js,output
I know this is a far cry from what I'm trying to do, but it's as far as I can get given what I currently understand. I'm also open to the possibility that the only way to accomplish this would be either through external libraries or by use of jQuery, but I don't even know where to begin.
Simplest answer is using caret.js : http://ichord.github.io/Caret.js/
simple as :
$('#inputor').caret('position');
full documentation can be found on Github:
https://github.com/ichord/Caret.js
I'm currently trying to create a speech bubble using FabricJS. The user should be able to write text into it and the text should be inside the speech bubble. I'd post an image, but I don't have enough reputation, yet. So this is basically about fitting text into an image.
What I'm doing is load the image, then create the text and put them both into a group, so the user can move them around together.
However, the problem is: When the text is too long, it'll continue to go outside the bubble instead of having linebreaks.
What I could do now is check the width of the text, and if it is too much, add some line breaks by figuring out words where to use it. I doubt that'd work pretty good though and it isn't very efficient.
Is there another solution for this?
Thank you!
Does anybody know how to enable column selection in a textarea.
I have absolutely no idea how after hours of searching google.
Very new to javascript, html and css.
I would like to make it so you could just highlight the c's below and not the a's or b's and perform functions such as copy and paste, exactly the same way that column selection works in notepad++ but replacing the text selection done normally, rather than having to hold down alt. I am using monospaced typing.
bab
bcb
bcb
bcb
bab
Any help at all even just pointing me in the right direction would be greatly appreciated, thankyou
Ace editor accomplishes this using multiple cursors. (Click here to see the demo and hold Alt while selecting.) It's not trivial to implement, but it is close to trivial to add the Ace editor to your site.
You can see the pull-request that added this feature with interesting bits here, here, here, and here. Overall looks to be about 1000 lines of code for that feature.
What I am trying to do is something similar to how collaborative editor works. I want to allow two people to edit the same document. And for this I have to simulate an artificial caret. I can extract the other user's activity in term of addition and deletion at specified location in a textarea.
I will then transmit the location, along with the action to the other document. There I need to carry out the required change at the sent coordinate. I have searched and found enough ways to set the caret location and insert or delete text at the current caret location, but the problem is that the caret of the document moves to the location at which I make the change.
I don't want that, I want to have two carets, one each for the two users. Transmit their changes to each other documents and make the changes at their respective locations, while showing two different carets.
I just need to know if there are certain libraries that I can use, or even if I have to make this on my own, then how and where do I start. I don't even know how a textarea is represented within a browser. How can I characterize locations within a textarea, if I know that then I save the locations in memory and make the changes based on the input received.
I hope I make sense, thanks for any help.
have you seen this?
https://github.com/benjamn/kix-standalone/
This is how google docs does it:
https://drive.googleblog.com/2010/05/whats-different-about-new-google-docs.html
You could mimic a caret with a special character and do the regex to insert the partner text and move his caret, and you can use the real one. This is the simplest design I can think.
To get the idead, you could use the pipe | as a artificial caret. but this would easily conflict with user insert a pipe, to avoid this you can use sort of uncommon combination, or find some unicode character to act as a caret.
A real solution but way more complicated is not use a textarea, and use a DIV. this means that you need to handle all the key events and insert the character pressed manually to the document, and register the cursor position. But this way you can insert how many carets you want not just 2, something like this <span class="caret1"></span> you can make it blink, style with css, have diferent color for each caret, etc.
Have you tried Draft.js, from facebook ? https://facebook.github.io/draft-js/
"Draft.js is a framework for building rich text editors in React, powered by an immutable model and abstracting over cross-browser differences.
Draft.js makes it easy to build any type of rich text input, whether you're just looking to support a few inline text styles or building a complex text editor for composing long-form articles.
In Draft.js, everything is customizable – we provide the building blocks so that you have full control over the user interface."