I think I may already know the answer to this one but...
Is it possible to have two carets in a single textbox, or have two separate textboxes focused at the same time allowing the user to type into both symataniously?
I know you can simulate this by adding a keydown listener and making their values match, but I want the visible caret in both fields.
If not, does anyone have any ideas on how to simulate this?
Ace editor supports multiple cursors/carets like Sublime Text:
http://ajaxorg.github.io/ace/
Ctrl+Click (or Cmd(⌘)+Click on OS X) in the live demo on that page to get multiple cursors and type away!
You can also select a bunch of code and use Tab to indent a tab space, or Shift+Tab to outdent a tab space.
Check out #Sly_cardinal answer, That does everything you require, it is more off a "heavy" solution, but is certainly the only way you'll get something like this. It can be customized with a bit of work but its definitely the correct answer.
+1 #Sly_cardinal - Just what i've been looking for!
Rendering a text area is handled by the user agent (browser), we can control the style, look and feel, but unfortunately not the functionality (To be able to do multiple cursors anyway).
Bummer.. This would be amazing!
Try
<html>
<body>
<input id="edValue" type="text" onKeyPress="edValueKeyPress()" onKeyUp="edValueKeyPress()"><br>
<span id="lblValue">The text box contains: </span>
<input id="secvalue" type="text">
</body>
<script>
function edValueKeyPress()
{
var edValue = document.getElementById("edValue");
var s = edValue.value;
var lblValue = document.getElementById("secvalue");
lblValue.value = s;
}
</script>
</html>
I suppose this is your requirement
Related
I made a Chrome Extension that allowed me to change certain characters if certain keystroke combinations were made to any input or text area field. It works fine as long as what I am typing in is a input or textarea field. However, when I go to a site like FaceBook and try their post or comments field, it doesn't work because those fields somehow don't have textarea tags in their source.
Here is what I currently use.
document.activeElement.onkeydown = function(){ getCharKeyDown(event) };
document.activeElement.onkeyup = function(){ getCharKeyUp(event) };
What would I need to do, to detect if a user is typing in a textarea that doesn't seem to actually be a text area (in plain JavaScript please)?
Thanks.
Thanks to epascarello, I think I've got it sorted. After a bit of reading about the HTMLElement.contentEditable property, I came across Document.execCommand() which seems to take care of all editable elements.
This was the main change I made
function insertAtCursor(myField, myValue) {
document.execCommand('insertHTML', false, myValue);
}
and now I am able to run my functions wherever.
I'm making a game and I've a html text box, <form> <input> </form> where the users will type in a number and submit it using a html button <button>. How do I get the number using JavaScript so I can use it in my game.js so I'll know how many lives the user want when the submit button is pressed?
I'm not quite sure if this is the correct approach but I was thinking getting the id of the <input> tag and then for the JavaScript part I would use .getElementById of some sort? However, I'm not sure how to incorporate the submit button so that only when it's pressed, I will receive what the user inputted.
Or is there another better way to do this? And if possible, can you provide an example of the codes for doing this?
Let me know if any clarification is needed, thanks!
There are multiple ways to do what you are asking for, one way to do it is as cristian has shown in the comment(using jquery).
In this jsfiddle page I've shown a sample way to do it just using javascript.
The code used in the page is as shown below:
document.getElementById("submit").onclick = function(){
var a = document.getElementById("input").value;
alert("The entered value is: "+a);
}
I have been doing research on this simple sounding issue for a couple of days and I have not seen any result.
In a nutshell my problem is as follows: I would like to select text in a some input field, move focus to another field (or generally speaking some other element), but not lose my selected text.
Such a situation could correspond to a use-case in which I select text in a field, right-click and display a custom popup menu, but do not wish to lose focus of selected text, because I want to do some operations on the previously selected text.
A small code test sample would be (for my initial simple scenario - here I am forcing text selection when the second input field gains focus):
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<input type="text" id="text1" size="20" value="Test1"/>
<input type="text" id="text2" size="20" value="Test2"/>
<script>
$('#text2').focus( function (evt) {
var target = $('#text1')[0];
target.select();
console.log('active/focused element: ' + document.activeElement.id);
});
</script>
</body>
</html>
I have been searching SO and web for a solution to this and have not seen much if any help.
I am not sure this is even really possible (due to the link between blur and selection lost and focus and selection). I have seen a style property called preventDeselect, in another SO answer - this does not work and I have not even such documentation or browser support for this.
I am quite struggling with this and would appreciate some help: even saying I can't do this at all or maybe some ways to go.
UPDATE:
Just for the record, my user scenario, which refers to text selection and context menu, is a common one (it slipped my mind to mention): just select some text in this page (or in an input type field) and right click to get the browser's default context menu - my scenario is different in that i want to use a custom menu, but with similar behavior to the browser's context menu - which normally allows to select some text, cut/copy the selection, navigate within the context menu without losing the selected text. So I think it should be possible somehow :) to do all these things with a context menu and still have your selection.
Attempting to answer this part of your question:
Such a situation could correspond to a use-case in which I select text
in a field, right-click and display a custom popup menu, but do not
wish to lose focus of selected text, because I want to do some
operations on the previously selected text.
For this use-case, I created a quick fiddle: http://jsfiddle.net/4XE9a/1/
Note: Am using the same getSelection function from #David's answer.
If you select any text and then right-click on the input, a custom popup menu appears. Click "option 1". You will find that the selection is not lost even though the focus has shifted to that anchor tag.
However, for the second part of your question regarding focus shifting to another textbox, #David's answer suffices.
Update: (after your comments)
Please see this updated fiddle: http://jsfiddle.net/783mA/1/
Now, when you select some text and right-click on the input it will show the custom popup menu with three options. Use tab to navigate and press space or click on the highlighted option. (Due to paucity of time I could not implement up/down arrow keys, but the concept remains the same)
This demonstrates your question in the comment that the selection is still not lost while navigating the menu.
Note: You are wanting to visually keep the selection highlight and not lose the selection while clicking anywhere else. Please note that this is not possible because text selection behavior is OS implemented. Browser, html etc do not play a role here. The text selection is lost as soon as you click anywhere outside the context of selection. This is because the system starts expecting a new selection as soon as you click anywhere outside. However, controls without text surface are exempt. Button, scrollbar arrows etc will not cause selection to lose.
To view this behaviour, in the fiddle, select some text and then click any dropdown on the left pane. The text selection is not lost, even visually for that matter.
This is why in the new fiddle above, I purposely used buttons to demonstrate.
You can save each selection in an interval, then retrieve it when you like. Here is an example that pulls the selection when the input has focus and clears the interval on blur:
function getSelection(elm) {
var start = elm.selectionStart;
var end = elm.selectionEnd;
return elm.value.substring(start, end);
}
$('input').focus(function() {
var self = this;
$(this).data('interval', setInterval(function() {
$(self).data('selection', getSelection(self));
},20));
}).blur(function() {
clearInterval($(this).data('interval'));
});
Now you can stuff like:
$('#text2').focus(function() {
console.log('selection in #text1 was: '+$('#text1').data('selection'));
});
Demo: http://jsfiddle.net/qCCY5/
I have always sucked at javascript I have read multiple books and studied online but on some things I just cannot get them to work. Anyway, I use a simple javascript function that selects all of the text in a textfield when I hover it:
<input type="text" onMouseOver="this.focus();this.select()">
how do I undo that action once the cursor is no longer over that field? This is important since I bought a new BlackBerry Bold 9930 and hate the internet browsing, but with javascript I am making things easier like highlighting all text in a field by just hovering over it. So I just need the code that unselects all of the text once I move away from that field since in the Blackberry browser it wants to stay stuck in that field highlighting the text unless I click somewhere else. Thanks.
<input type="text" onMouseOver="this.focus();this.select()" onmouseout="this.selectionStart = this.value.length; this.blur();">
http://jsfiddle.net/meQek/
it's kind of an odd way but logical when you think about it. If you highlight it all on mouseenter, the selectionEnd is at the end... so just make the selectionStart at the same position on mouseleave.
EDIT:
actually... blur works just fine :P
http://jsfiddle.net/meQek/1
<input type="text" onMouseOver="this.focus();this.select()" onmouseout="this.blur();">
Try this:
<input type="text" onMouseOver="this.focus();this.select()" onmouseout="this.blur();">
Not sure how the Blackberry browser will handle it, but in most browsers it should unfocus the text field when your mouse leaves it.
this is going to be a total newbie question but I can't really do a google search cos I'm not sure what it's called.
You know that the quick search bar on the top right hand corner in StackOverFlow?
You know how it's got "search" written there, and when you click on it, it goes blank, what's the best way to implement this?
I see the javascript has this in stackoverflow.
onfocus="if (this.value=='search') this.value = ''" value="search"
But if I have a seperate search button, and the user doesn't focus on that search criteria (it's got multiple search criterias), I would need to take the "search" into account.
I would need to do something like
if(textbox1.Text == "search")
{
textbox1.Text = "";
}
That just seems a bit annoying having to put the text ("search") in 3 places. Twice in the markup and once in the code behind.
Is there another way of doing this?
The term you're looking for is "placeholder". Other than doing it manually, there's the HTML5 placeholder attribute which is being supported by more browsers as time goes by.
Looks like the SO search does what you did where the onFocus clears the text if the text is search. You can prove this by typing search into that box, click somewhere, then click back in the text box and it is removed. Do the same thing using "test" and it is not removed.
If you do end up implementing it manually make sure you use a constant instead of using "search" in multiple places. Using a constant is less error prone because you won't mis-type and if you change what you want it to say you will only have to change it in one place.
Yes, there are other ways to do it, but all of them will require typing more than just "search" 3 times.
For example, you could put a constant string in your class like this:
const string SearchText = "search";
Then, in your class you would say something like this:
if(textbox1.Text == SearchText)
{
textbox1.Text = "";
}
And in your aspx page you would say:
onfocus="if (this.value=='<%= SearchText %>') this.value = ''" value="<%= SearchText %>"
Now, doesn't it seem a lot simpler to just write the word "Search" 3 times?
If you have a button written "search" on it, you don't need the text on the input field, because it's obviously a search input. Here in sof there's no search button or label, so if there's no text on the input, you don't know what it's for.
In your case, there's 3 boxes for 3 search criterias. So instead of putting "search" on all of then, you should put the search criteria description. This is just to save the space a label would take. If you use labels, you don't need the text inside the input.
Finally, if on the back end you receive the input value as the description text, just ignore it.
Well the real answer is to use a javascript framework like jQuery where binding this stuff becomes much less repetitive than inline event stuff.
Otherwise, what you do is you add an onsubmit handler in the form which indeed does what you describe.
Alternatively, if localization is not an issue, you don't use "real text". You use a background image that looks like text. Then you can have css
<style>
.watermark {
background-image: url(xxxxx.png)
}
.nowatermark {
}
</style>
(I'm guessing at the syntax)
Then you can have
<input type="text" name="search" class="watermark" onfocus="this.className='nowatermark'" onblur="if (this.value=='') this.className='watermark'" value="">
Not sure if it's overkill, but I ended up using the telerik rad textbox instead.
<telerik:RadTextBox ID="txtPublishedPapers" runat="server" EmptyMessage="Enter name of Published Papers/Journal here">
</telerik:RadTextBox>
And it worked okay.
it's called a placeholder or watermark
in HTML5 it's really easy, you just have to write placeholder="your placeholder"
http://diveintohtml5.info/forms.html
otherwise in JavaScript you can do something like this:
http://lab.dotjay.co.uk/experiments/forms/input-placeholder-text/