The title manages to ask most of the question, however, I'm curious which part of using the LMB to click triggers the visual highlighting.
What I mean by visual highlighting is the blue colored box (if you are on default) that shows what text you have selected, so you can see it. To my knowledge, the actual selection is a difference of the selection objects anchor and focus, but is there something somewhere in between that tells Chrome to draw a blue box?
I figure these two things, text selection and text highlighting, aren't necessarily working together but rather working simultaneously. I would love to be able to simulate text selection - and thus highlighting - with other keys/buttons.
If i understood your question you talking about .select event(i'll use jquery to show what you can do with that). that event trigged when user select some text in your element. for example:
$("#TextArea").on("select", function(){
alert("you have been selected somesing");
});
TextArea is an textarea of course.
EDIT: just some more info, and tips:
$("#TextArea").on("select", function(){
indexOfSelectionStart = this.selectionStart;
indexOfSelectionEnd = this.selectionEnd;
alert("first index: " + indexOfSelectionStart + ". sec: "indexOfSelectionEnd);
});
With the indexes you can know what the user has selected(if you use slice())
I hope that helped, let me know if not.
Good Luck.
Related
I have some text content displayed on a UIWebView which is plain html. The current paragraph is highlighted in yellow and the user has selected the word 'If the'. (link to image: http://i.stack.imgur.com/GKp9h.png)
1) When the user selects some text on the uiwebiew, how do I perform dynamic highlighting? i.e. as the user is selecting text, what ever text is selected gets highlighted in purple?
For instance, I like the words 'If the' to be highlighted in purple (maybe using window.getSelection() ? ) and that this behaviour is dynamic such that as the user selects subsequent words, these words under selection gets highlighted in purple.
What I am struggling with at the moment is:
1) What event handler (JavaScript or iOS) should I listen to, when the user is selecting some text on the uiwebview? This is before the uimenucontroller opens up.
2) Once, I get the selected text (using window.getSelection(), how do I modify the DOM in a clean efficient way such that the selected text gets highlighted?
I suppose for 2) I cannot directly use style.backgroundColor=<hex code of purple>
There's a very similar question here: How to get selection text from UIWebView?
From the accepted answer there, looks like this might answer your question: http://zaldzbugz.posterous.com/how-to-mark-or-get-the-highlighted-string-ins/ There's a discussion about getting and styling the text selection in a web view.
How to hide cursor in asp.net textbox using JavaScript? I don't want see blink thing in textbox.
Please don't do this, you're breaking the user's expectations, the cursor is there for a reason, when the user types or hits delete, backspace, etc...they want to know where it's going to happen at.
If you want to edit a textbox and then cause focus to leave, that's a different matter, just focus another element:
document.getElementById("otherElement").focus();
Here's something you can try.
disclaimer -- as others have mentioned, it sounds like you're headed for an accessibility nightmare. You (or your client) still might have their reasons for wanting this behavior, though. This is a terrible hack, but it might give the results you want.
Hack
Have two text boxes, a real textbox that the user never sees but enters the text into and a dummy text box that displays the text. When the user clicks the dummy textbox, the real textbox should be focused. When the user edits the contents of the real textbox, the dummy textbox should be updated.
Example
Test it out here - http://jsbin.com/ihobe4/edit
function makeCaretInvisible(textboxId) {
var inputBox = document.getElementById(textboxId);
var outputBox = inputBox.cloneNode(true);
outputBox.id=outputBox.name='';
outputBox.onclick=function(){
inputBox.setSelectionRange(outputBox.selectionStart, outputBox.selectionEnd);
};
inputBox.onkeyup=function(){
outputBox.value=inputBox.value;
};
inputBox.style.position='absolute';
inputBox.style.top='-10000px';
inputBox.parentElement.insertBefore(outputBox, inputBox);
}
I am building a very dynamic web-based application using a lot of Javascript to handle user events. I am in the process of making things a little more usable and came across a problem that I've never had before.
I am using jQuery, so factor that in to your answers. Thanks in advance.
I have a set of button elements defined as:
<input type="button" title="My 'useful' text here." disabled="disabled" />
I have these buttons with a default style of:
div#option_buttons input {
cursor: help;
}
Then, using jQuery I run something like this as a click-event on a select box:
window.current_column = '';
$('select.report_option_columns').live('click', function() {
var column = $(this).val();
if ( column == window.current_column ) {
// clear our our previous selections
window.current_column = '';
// make this option no longer selected
$(this).val('');
$('div#option_buttons input').attr('disabled','disabled');
$('div#option_buttons input').attr(
'title',
'You must select a column from this list.'
);
$('div#option_buttons input').css('cursor', 'help');
} else {
window.current_column = column;
$('div#option_buttons input').attr('disabled','');
$('div#option_buttons input').attr(
'title',
'Add this option for the column "' + column + '"'
);
$('div#option_buttons input').css('cursor', 'default');
}
});
So, as you can see, when a column is selected in the select box (not shown here), I want the button to be enabled and behave like a button would (with my own click-events). But when a column is not selected (including the default load), I want the button disabled. The usability developer in me wanted to give the users subtle contextual clues as to what they can do to enable the button through the native rendering of the title attribute as a lightweight tooltip. I do this already in other areas of the application (this is a crazy beast of a project) and our usability tests have shown that the users are at least capable of recognizing that when the cursor changes to "help" that they can hover over the element and get some information about what is going on.
But this is the first time I've ever tried this with a form element. Apparently when I put disabled="disabled" in the element, it completely ignores the title attribute and will never display the tool tip.
Now, I know I have a few options (at least the ones I could think of):
Write my own custom tool tip plug-in that is a little bit more robust.
Don't "disable" the element, but style it as disabled. This was the option I was leaning on the most (in terms of ease to develop) but I hate having to do this.
Leave the button as enabled but don't process the click event. I don't like this option as much because I like to leave things natively styled as they should logically be. A disabled button "feels" the most correct and the look of a disabled button is instantly recognizable as a disabled button.
So, with all that said, am I missing something? Is there something easy that I can do that I just haven't thought of? Google searches have failed me on this topic, so I thought I'd toss this out on StackOverflow to get some fresh eyes on this.
**Edit**
I just found another StackOverflow question on this same topic, though that person used a very different set of terms describing his problem (probably why I didn't find it).
The url to the question is: Firefox does not show tooltips on disabled input fields
Both of the answers on that question are pretty good, though I'd like to see if anyone has any other suggestions. Maybe something more jQuery specific? Thanks again.
I had a similar problem and I just surrounded the disabled element in another element and interacted with that div, i was using tipTip to show tooltip for disabled checkbox
<div style="cursor: pointer;" class="disabled" title="Do something to make it work" >
<input disabled="disabled" type="checkbox">
</div>
There are several validation plugins that are very robust. You can find them in the jQuery plugins area.
Another option for you though which I happen to love and tends to be trending now adays is using the "Tipsy" plugin. You can put little '?' icons to the right of your text fields and people can mouse over them to get a "facebook-like" tool tip. This plugin is very sharp and I highly recommend it.
Good luck!
I haven't tested whether or not that solves the problem with the missing title, but you could also disable the button(s) using jquery on $(document).ready()
regards,
harpax
If that doesn't break your design totally, you can replace your button by a "span", "p",... tag with "My 'useful' text here."
And swap it with the button only when the user makes the correct move.
I recall seeing a web site that when you highlighted/selected text on their page, it produced a small balloon just to the upper right, which was clickable and would perform some action when clicked. I have an application where this type of interface would be appropriate for my users. But... I haven't any idea what to call this widget nor where to start from scratch.
I think you may be referring to a tooltip. These are easily done with javascript; here are just a couple of options:
http://www.nickstakenburg.com/projects/prototip2/
http://craigsworks.com/projects/qtip/
You would use a javascript event to trigger the popup when the user selects some text. jQuery comes with some pre-rolled event handlers that will probably accomplish what you are looking for:
http://docs.jquery.com/Events/select
Noah
(Quick & Dirty) - Use this as a starting point. I'm going to assume that you're using jQuery to provide a cool tooltip to the user upon text selection, instead of the alert the code does. :p
function getSelection()
{
if(document.selection)
{
return document.selection.createRange().text;
}
else
{
return window.getSelection();
}
}
$(document).mouseup(function() { alert(getSelection()); });
This subscribes to the mouseup function and will alert whatever the user has selected, if anything. Naturally you'd have to flesh this out so that you check if the text is empty, and if not spawn a tooltip or do whatever you'd like with the text.
I'm working on implementing sprited buttons in Stackoverflow's beloved WMD markdown editor and I've run into an odd bug. On all versions of IE, the selected text is lost upon button clicks, so, say, highlighting a block of text and clicking the code button acts like you placed the cursor at the end of the selection and clicked the button.
e.g. highlighting this:
This
Is
Code
and clicking the code button give you:
This
Is
Code`enter code here`
What's really weird is that I left the original non-sprited button bar in and that works just fine. In fact ALL buttons and keyboard shortcuts code use the same doClick(button) function!
Old-style non-sprited buttons: OK
Keyboard shortcuts: OK
Sprited buttons in non-IE browsers: OK
Sprited buttons in IE: WTF
I've isolated the problem down to a call to selection.createRange() which finds nothing only when the sprited button is clicked. I've tried screwing around with focus()ing and making sure as little as possible happens before the doClick() but no joy. The keyboard shortcuts seem to work because the focus is never lost from the input textarea. Can anyone think of a hack that will let me somehow collect the selected text in IE?
The onclick handler looks like this:
button.onmouseout = function(){
this.style.backgroundPosition = this.XShift + " " + normalYShift;
};
button.onclick = function() {
if (this.onmouseout) {
this.onmouseout();
}
doClick(this);
}
I've tried moving the onmouseout call to after the doClick in case that was causing a loss of focus but that's not the problem.
EDIT:
The only thing that seems to be different is that, in the original button code, you are clicking on an image. In the sprited code, you are clicking on a list item <li> with a background image set. Perhaps it's trying to select the non-existent text in my list item?
/EDIT
Actual code is located in my wmd repository on git in the button-cleanup branch.
If you revert to the 0d6d1b32bb42a6bd1d4ac4e409a19fdfe8f1ffcc commit you can see both button bars. The top one is sprited and exhibits the weird behavior. The bottom one contains the remnants of the original button bar and works fine. The suspect code is in the setInputAreaSelectionStartEnd() function in the TextareaState object.
One last thing I should mention is that, for the time being, I'm trying to keep the control in pure Javascript so I'd like to avoid fixing this with an external library like jQuery if that's possible.
Thanks for your help!
I know what the answer to my own question is.
The sprited buttons are implemented using an HTML list and CSS, where all the list items have a background image. The background image is moved around using CSS to show different buttons and states (like mouseover highlights). Standard CSS button spriting stuff.
This works fine in IE with one exception: IE tries to select the empty list text when you click on the background image "button". The selection in the input textarea goes away and the current selection (which will be returned by document.selection.createRange()) is moved to the empty text in the list item.
The fix for this is simple - I created a variable to cache the selection and a flag. In IE I cache the selection and set the flag in a mousedown event handler. In the text processing, I check for the presence of the flag - if it's set I use the cached range instead of querying document.selection.createRange().
Here are some code snippets:
wmd.ieCachedRange = null;
wmd.ieRetardedClick = false;
if(global.isIE) {
button.onmousedown = function() {
wmd.ieRetardedClick = true;
wmd.ieCachedRange = document.selection.createRange();
};
}
var range;
if(wmd.ieRetardedClick && wmd.ieCachedRange) {
range = wmd.ieCachedRange;
wmd.ieRetardedClick = false;
}
else {
range = doc.selection.createRange();
}
The solution is only a few lines of code and avoids messing around with the DOM and potentially creating layout engine issues.
Thanks for your help, Cristoph. I came up with the answer while thinking and googling about your answer.
You have to blur() a button before IE can select anything else on a page.
Can you provide a minimal example (only containing relevant code) which reproduces the bug?