I am using focus to text boxes, When I click on 2nd box, 1st box will minimize and 2nd box will maximize and I will upload all the text in that box after filling the text,I will click on page all the text boxes must be minimize,So please tell me how to hide all text boxes which is mentioned in that page when I click on white space beside text boxes.
I used pagewrapper to hide but it did not work,so please help me from this.
$(yourParentSelector).focusout(function(){
toggleYourBox(off);
});
$(yourBox).focus(function(){
toggleYourBox(on);
});
U may bind this functon on each box or just on the parent part
There might be n no. of text boxes so you would need to handle it on blur of every text box. so you should use body click
$("body").on("click",function(event){
var $element = $(event.currentTarget);
if($element.attr("type") !== "text"){
// write your code
}
})
Related
document.getElementById("hs-search-origin").value = myloc;
I am successfully writing the value in a Text Box
The text box is attached to a searchbox and up on clicking the search button, search is not happening.
I have to edit the textbox, like remove character or add character in the text box, to make it work.
For Ex:
myloc="i love stackoverflow";
document.getElementById("hs-search-origin").value = myloc;
The text box shows the value i.e "i love stackoverflow" but on clicking the button, nothing happens.
I have to either edit the text in the textbox and then click on search to make it work. What is the issue, any guess
You have some code which runs (and does a search) when the user changes the value of the text box.
It doesn't run when you change the value with JavaScript.
You need to call that code explicitly when you want it to fire in response to something else than the user typing.
I have a custom directive that should have the following functionality:
-display button upon load
-show input box and expand box when button is clicked
-show clear text icon when user types into text box
-clear text when icon is clicked and re-focus on text box
-minimize text box and show button when user clicks away from text box and clear text icon
Here's what I have so far: http://jsfiddle.net/Z6RzD/161/
My problem is that when a user clicks on the clear icon, the text box's blur function is fired and the box loses focus.
I tried creating a scope variable in my controller that will let me know which element has been clicked on. I then tried to share this variable in my directive's blur function but it comes up undefined.
$scope.clickElem;
$document.bind('click',function(e){
$scope.clickElem = e.target;
$scope.$apply();
console.log($scope.clickElem);
});
Any ideas on how to fix this? I appreciate any help.
If it's ok for you to use HTML5, you can just replace <input type="text"> with <input type="search"> and get the clear behavior for free. Here's your jsFiddle modified to do that.
try this..
var scope;
$('ELEMENT').click(function(e){
scope = e.target;
});
that should most def. not return undefined.
I need to implement a code in jquery, where I can enter any text in the text field, and then after I click on the "Submit" button, that text should turn into a clearable field something like this
I tried putting this box in my textfield, but this makes my whole text field as a clearable field,
$(document).ready(function(){
$('input[type=text]').clearableTextField();
});
I dont want to do this, I want that when i type something in the text field and click the Submit button, it should become a clearable text object.
Any help is appreciated!
Thanks.
One way to achieve this (similar to the way tag entry is done on Stack Overflow) is to have a separate div to the left of your input field into which "clearable text fields" are placed. When the submit button is clicked (or the spacebar is hit, or any trigger that javascript can listen for), have javascript create a new span within the left div, and reduce the width of the input field by the same width as the new span tag. You can include a delete button and any relevant styling in the HTML/CSS for the span.
A demo which achieves a similar effect through jQuery is available here: http://xoxco.com/projects/code/tagsinput/. (Suggested by #sachleen in response to a similar question)
I have a TextArea, textBox and a button. TextArea has some text e.g This is a cat.
Now my requirement is If someone set cursor position in TextArea and enter text in textbox and click on button the text should be append in cursor position instead of last. e.g.
TextArea: This is a cat.
Cursor position: after "a"
Entered Text in TextBox: black
Output: This is a black cat.
How can I do this using javascript.
Thanks in advance.
I've answered this before:
Inserting text at cursor in a textarea, with Javascript
One extra note is that IE will lose the caret position by the time a click event fires on a button. To get round this you can either use themousedown event instead, or make the button unselectable by adding an unselectable="on" attribute.
Using Google: How do I add text to a textarea at the cursor location using javascript
Copy the code from the above post (The one by Tim Down) and replace
insertTextAtCaret(textarea, "[INSERTED]");
with
var textBox = document.getElementById("your-textbox-name");
insertTextAtCaret(textarea, textbox.value);
Gday All,
The following code displays a div based on the option that has been selected within a drop down box.
$(document).ready(function() {
$("#SomeDropdown").change(function() {
var theVal = $("#SomeDropdown option:selected").val();
$("#SomeDiv_" + theVal).css("visibility", "visible");
});
});
How do I display the div when the user hovers over the value within the drop down box? (Instead of clicking on it)
Cheers,
Michael
I don't think you can with a standard select box. You can only attach a hover event on the actual drop down as a whole (though you can attach it only if a value is selected in it).
If you must have this functionality, you may need to develop your own styled drop down... however this has it's own problems (usability for one).