I was wondering if there is a way for me to open up a textbox for users to type in on an onclick event? How would i go about making this? I'm thinking now that there may be a way for me to grab what the user types on a canvas and use the methods i've read about to output the text. Is this a possibility? But how would i allow the user to type on the canvas in the first place?
I've done a lot of reading and all the examples i could find were about simply outputting text onto the canvas rather than creating a textbox.
Any ideas?
You have to literally make one, as in the onclick event fires and you do: var myInput = document.createElement("textarea");
You need to set the myInput.style.width, height, top, left, and of course the myInput.style.position to "absolute", then position it where the user would expect.
Then you need to assign events to it. Maybe on keydown it will look for the Enter key, and if the enter key is pressed it will disappear and commit the text however you want it committed.
Then add it to the page.
Maybe it will do the same thing on a blur event (if the user clicks away).
canvas is a bitmap image. You can't put an element "in it". You could put one hovering over it, though. What I think your looking for is the html5 contenteditable attribute.
A simple solution - use Javascript's alert box. This will enable us to grab the text which the user wants to place on the screen. Then write the text where ever you want on the canvas (lots of tutorials on how to write text on a canvas).
Related
Okay so this is a unique scenario.
This is a web app that is not accessed anywhere but on a set top box. The peripheral for this application is a TV remote control.
i.e: NO keyboard, NO mouse.
Of course normally, when an input element is focused, a cursor appears and blinks at the current position. You type characters, they show up, and the cursor automagically advances. whoohoo!
But what we need to do is replicate that behavior when the input element is not focused.
This behavior is seen mostly in video games and other TV/large screen interfaces. You have an onscreen keyboard and you choose characters by navigating to a letter or number and hitting enter/select or whatever button is "select" for that platform (like maybe the 'X' button on a Playstation). The letter shows up in the input field, the cursor advances, but the actual element with focus is the current key on the onscreen keyboard.
We tried making the keyboard using <div> tags, but then we lose the behavior of the very convenient placeholder attr, and it is just a mess of logic recreating what a cursor and placeholder should do. I would love for the cursor to ALWAYS be on an input element, just after the last character, and NOT present when the input has no value, showing only placeholder="Search". Almost sounds like I need to be able to have two elements on a page with focus, which is not possible as far as I know.
But is it possible to have an input element not focused and still see a cursor? Or are we stuck using other tags and recreating that behavior from scratch?
Scouring the internet, I have found no solution. jQuery solutions are acceptable.
I don't know if I understand your question right but you could simulate a cursor with the | character. I put together a quick example that may help you.
example fiddle
html
<input id="cursor" type="text">
js
window.setInterval(function(){
input=$("#cursor")
if(!input.is(":focus") && (input.val()=='' || input.val()=='|')){
if(input.val()==''){input.val("|");}
else if(input.val()=='|'){input.val("");}
}
else{}
}, 500);
I know there are many similar topics but none of them has the solution to my problem so please read my question carefully before sending similar topic links and marking as duplicate question.
I have a content editable DIV object, something similar to TextArea control. My goal is to cancel key press events if content starts scrolling and there must be no flickering.
When i use keyUp event, it's too late to cancel and there is also no methods available to cancel changes. What's done is done at this stage.
When i use keyDown or keyPress events, they are cancelable. But new changes are not yet applied. So, i know which character is pressed etc. but i still don't know how it's going to affect the scrolling size.
Plus, i allow style changes like making the text bold or changing the font size. Since there is;
document.execCommand("undo");
command, i'm able to test these changes and undo if scrolling starts. To test things, i use a cloned div with same content. It works fine. Changes are applied to cloned div (which is visible at the moment for debugging purposes but will be invisible if the method works) and if cloned div has an overflow, changes are canceled.
My problem is at doing the same thing for key presses. It's harder to simulate what happens to editable div content than using document.execCommand for other styling options. What i need is to get the innerHTML result at keyUp stage before keyUp occurs and event is still cancelable like keyDown or keyPress.
To simulate things, i tried getting cursor position and adding pressed characters manually using substring function but content isn't plain text and i had many problems with it. For instance when i press enter, an HTML block <div><br></div> is added for newline character which messed up cursor position. I tried many ways to handle things but it's very open to bugs. So, i decided not to follow this path.
In short my question is;
How can i possibly limit an editable div area by height, not allowing
to overflow or scroll without any flickering, just canceling key press
events? Do i have to simulate something like willKeyUp or is there any
other cross browser way?
Here is jsfiddle link for my sample which works for document.execCommand case (changing font size, weight etc.) but fails at typing letters;
http://jsfiddle.net/7zQD2/
Edit: To clarify my goal at jsfiddle example, after writing 5 lines of text, either when you press enter or type to end of the line, cursor should never reach to the sixth line. Key presses should be canceled and cursor should stay at fifth line with no content changes or flickers.
One solution is to use the cloning setup you already have, but to set the opacity of the first copy to 0 and position it on top of the clone with position: absolute in the css. The first copy won't be visible, but will catch a click directed towards the visible one underneath it. You can change your event to fire on keyup.
Since the transparent div still exists, and still has height, it can measure text height for you without being visible to the user. The visible text then updates to match what is learned with the transparent text, and never reaches the 6th line or flickers.
http://jsfiddle.net/7zQD2/2/
I have contenteditable span with a max-width setting that allows the user to enter text. What I'm looking to do is detect when the user reaches this width limit and a new line is displayed on the page. I am trying to create a WYSIWYG editor that creates text, (in SVG), exactly the way it looks in the contenteditable span when the user presses enter. I have successfully captured the enter event, so that is not an issue, I am looking for a way to either detect the word wrap, or calculate where it should occur. Any help is appreciated. (I can post sample code if needed)
When the height of the element changes, you know you have word-wrap occurring.
Monitor for a change event and see if the height changed. If it did, you have a word-wrap (or un-wrap). I threw together an example:
http://jsfiddle.net/eZDRD/
Generally if we provide a title tag it shows as a tool tip. So on mouse hover we can see this tool tip. My question is if I traverse the elements through keyboard, Is it possible to generate a tool tip at that time?
This could be helpful – http://www.w3.org/WAI/GL/WCAG20-TECHS/H33.html.
Some graphical user agents will display a tool tip when the mouse hovers
above an anchor element containing a title attribute. However, current user
agents do not provide access to title attribute content via the keyboard.
As Gedrox mentions, the HTML standard attribute "title" is only used for mouse over effects. However, you can do this via JavaScript using the onfocus event, see Display a fixed "ToolTip" when an input receives focus, using jQuery
if you are looking for a javascript tooltip:
you can use onfocus (and onblur) to get when the keyboard is going over (and out) an element.
you can get the position of the element with position. so you can display a tool tip.
I know onfocus and blur work for input fields and links, not shure if it is cross browser for other elements
not the default one. you can draw your own using a floating div that shows like the tooltip and fill it up with text it gets from the title attribute.
How do I get a JavaScript event when a Flash movie loses focus?
eg. like when the user clicks the HTML page.
Cant remember off hand if divs support onFocus and onBlur, but you could try making one div absolutely positioned to the top left where the width = the body width and the height = the body height, then put another one on top of it which only covers the object in question, then set an action to the big one's onFocus. Probably wont work, it was just my first thought.
I don't know the general answer, but if your flash is just diplaying things, no user interaction... try adding a hidden textfield and give the focus to it. Then you can check for that blur event.