I have a table which is filled with data from a database. Some javascript allows a user to select certain rows and take some actions. I allow users to click one row and then to shift click another row to create a group (as well as alt-click to select/deselect individual rows).
The problem is I don't like how the text highlights when they shift click. Is there some CSS setting or javascript/jQuery solution to disable the selectable text (cross browser preferablly or just in firefox).
If possible I also want to be able to let the user select text to copy and paste sometimes or inside a textbox form input inside the same table so I would like to be able to enable and disable the selecting of text somehow. Any ideas?
this should do the trick:
$('td').disableSelection();
example:
http://jsfiddle.net/GhfuJ/1/
Here's one way you could completely disable text selection:
$("selector").bind($.support.selectstart ? "selectstart" : "mousedown", function(event) {
event.preventDefault();
});
This is how jQueryUI implements its disableSelection() method.
You could tailor your selector to exclude textarea elements, or wrap code inside the event handler with an if block that evaluates a boolean that gets set under certain circumstances (For example, you could turn on booleans when the user is clicking or shift/alt + clicking).
Related
just wondering if it's possible to change a div to an input at a certain breakpoint?
I have a div that contains some names in and then when I switch to mobile, I want this div to become editable so I can change the names.
I guess I have 2 options, change the element type or make the onChange function only applicable on mobile.
is either possible?
can post code but essentially just want a guide or solution how to do this
First, to detect a mobile browser, you can use
if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
Then, on your page, use two elements - the div and the input (or a textarea) and just keep one of them hidden at all times. It seems like you want to listen for a click on the DIV to enable the INPUT, or? And you'll want a key listener on the input to update the DIV as well as another listener to handle hiding the input field and showing the DIV again
I have a table with user interaction controls in its cells (button, link, etc.) and I want to "grayed" some rows of that table so all operations of these rows will be disabled.
Any idea what's the best way to do this in Javascript?
Using jQuery, this sets the disabled property on <input> and <button> tags, which disables them:
$("#row_id input, #row_id button").prop('disabled', true);
Where row_id is the id of the row that has controls you want to disable.
For links, this makes it so that when they are clicked, nothing will happen:
$("#row_id a").click( function (e) {
e.preventDefault();
} );
You probably also want to add some classes to them so you can style them differently. Just ask if you want to know how to do that.
There is a related question on disabling links at jQuery disable a link
I am making a terminal window in HTML/JavaScript and am using a textarea for input. I would like to prevent sections of the text in the textarea from being deleted. For example, if I had the text in the textarea "C:\>Random Code" I would like to prevent the user deleting the "C:\>" text. Is this possible using javascript?
Assuming jQuery, this script will listen for keystrokes, and if any of the required text can't be found (ie: user tries to delete it) it will add itself right back in there:
var requiredText = 'C:>';
$('textarea').on('input',function() {
if (String($(this).val()).indexOf(requiredText) == -1) {
$(this).val(requiredText);
}
}
You cannot make a section of textarea uneditable (only the whole control).
You can use various JavaScript trickery (listening to keypress events and cancelling event using event.preventDefault if the user wants to do something that you do not want to allow)
Another solution is to, instead of having an undeletable section of the input, to automatically append (or prepend ) a predefined string to the user input (and conveneintly display it for the user in some way).
Update:
So, my solution would look like this:
var requiredText = 'C:>';
$('textarea').on('keyup',function(event) {
if (GetSelectionStart(this) < requiredText.length){
event.preventDefault();
event.stopPropagation();
}
}
Where GetSelectionStart is a function that tells the beginning of the selected text (or caret position, if no text range is selected). For some possible implementations, see e. g. Caret position in textarea, in characters from the start
This function assumes that requiredText is always at the beginning of the string. But of course, it can be adapted for more complex scenarios.
With JavaScript is it possible to have a drop down menu display a form field with an input type of text, instead of a list option? Could I get a jsfiddle demo example?
I recommend using JQuery to do this? Basically hide and show a div with all your input fields on it. This way you can create the illusion that it's a native dropdown. A standard dropdown does not support custom markup. There are aloso third party alternatives for "custom dropdowns" I suspect they are all implemented using some variation on what I suggested above...
Of course it is possible, but I doubt it is possible using a common <select> element. You should probably create a <div> consisting of several inputs (i.e. <input type = "text">).
Then you'll have a button (with a down-pointing arrow image :) ) and to its onclick event, you'll bind a function that shows your <div>. To hide the <div>, you can bind the hiding function to a click on the background or another click on your button.
To add some elegancy and create a dropdown effect while showing the <div>, you can set its height to 0 and then continually increment it with a timer.
I've written some JavaScript code using jQuery that listens for the user to click the mouse on different parts of my page with and without holding down the shift key.
I have a table on my page. The idea is that the user can select rows in the table by clicking on them. The user can select multiple rows by clicking one row, holding down shift, and clicking another row. (This is how the user expects to select multiple rows, but holding down the shift key, right?)
Anyways, my code works in Internet Explorer, but I have a problem. My code reads the users selection, but the browser simultaneously highlights the text between the two mouse click locations.
How can I make it so that my code can select the rows based on the user clicks and the browser doesn't select the text?
Update I tried the following code:
$('tr').bind('mousedown',function() { return false; } );
With this code in my page, when I click one row, hold down shift and click another row, the text between the two rows is highlighted. This is what I'm trying to suppress. Please note that the text highlights before I release the mouse button.
Update #2 I tried the following code:
$('tr').bind('mousedown',function(e) {
e.preventDefault();
return false;
});
Unfortunately, this doesn't seem to do anything at all.
It's the mousedown event you want to suppress.
Have a look at event.stopPropogation() and event.preventDefault().
The return value of an event handler is ignored by specification (jQuery might to additional stuff).
You may be looking for preventDefault and returnValue (this latter one was invented precisely because the return value of a handler is ignored).
You may also want to look into the CSS3 property extension -moz-user-select: none.
Try this
$(function(){
$("tableSelector").bind('selectstart mousedown',function () {
return false;
});
});