Select/Unselect Text on click Using jQuery - javascript

I want to create the following behavior in IE9:
Clicking on the textbox will select the text from the textbox. Clicking on it again will unselect the text.
I tried the following from this linK: http://www.codingforums.com/showthread.php?t=105530
var x = 2;
function selectIt(obj)
{
if (x % 2 == 0)
{
obj.select();
}
else
{
if (document.selection)
{
document.selection.empty();
obj.blur();
}
else
{
window.getSelection().removeAllRanges();
}
}
obj.focus();
x++;
}
I also used this: http://jsfiddle.net/HmQxZ/1/
But the above solutions have weird behaviors when applied to several textboxes. What is the best way to approach this kind of problem. Is it possible to do this without using a global variable?
UPDATE:
The fiddle works in Chrome. But it does not work in IE9. In IE9, the text is selected but when you click on the textbox again, the text is not unselected/unhighlighted. In Chrome, the second click unselects/unhighlights the text.
Thank you.

The problem with several text boxes would be that your x variable is global. You'd need a separate x variable per textbox.
You could use a map:
var x = {};
function selectIt(obj)
{
var key = ... <-- get name (or id) of textbox from obj somehow to use as key in map
if (!x.hasOwnProperty(key)) x[key] = 0;
if (x[key] % 2 == 0)
{
obj.select();
}
else
{
if (document.selection)
{
document.selection.empty();
obj.blur();
}
else
{
window.getSelection().removeAllRanges();
}
}
obj.focus();
x[key]++;
}

Here is your complete solution.
Demo http://codebins.com/bin/4ldqp79
HTML
<div id="panel">
<input type="text" value="Click Me to Select Text" />
<input type="text" value="Click Me to Select Text" />
<input type="text" value="Click Me to Select Text" />
<input type="text" value="Click Me to Select Text" />
<input type="text" value="Click Me to Select Text" />
<input type="text" value="Click Me to Select Text" />
</div>
JQuery
$(function() {
$("#panel input[type=text]").click(function() {
$(this).select();
});
});
CSS
input{
display:block;
border:1px solid #333;
background:#efefef;
margin-top:15px;
padding:3px;
}
Demo http://codebins.com/bin/4ldqp79

This works for me in Chrome - there is a toggle event function in jQuery but it is not needed in this case
$('input').click(function() {
// the select() function on the DOM element will do what you want
this.select();
});
​
but I suggest you tell the script which types of fields you want to select
$("input[type=text], input[type=url]").click(function() {
$(this).select(); // "this" is native JS
});
​DEMO

Try this Demo
DEMO jQuery:
$(function(){
$("input[type='Text']").on("click",function(){
if (typeof this.selectionStart == "number")
this.select();
});
});

Related

Show element in JavaScript by onkeypress function

I'm trying to show save button only if input gets value,
The issue is if i use append for each input i get 1 button printed, what I'm looking for is regardless of input length get the button only once.
The important is input not be empty that's all.
Code
<input class="text_dec form-control" type="text" onkeypress="myFunction()" name="text_dec[]" id="'+ textFieldsCount.toString() +'">
function myFunction() {
$('#moreless').append("button here");
}
any idea?
Instead of keypress, use keyup, this will call the listener just when the key is released, so you will have the correct length of the input value. With that, you can check if the button must be displayed or not.
Also, I would have another check to make sure that input have some value on it to save when clicked.
Like below, take a look:
$(function(){
$('.myInput').on('keyup', function(){
var btnElem = $('.myButton');
var charLength = this.value.length;
if (charLength > 0){
btnElem.show();
}else {
btnElem.hide();
}
});
$(".myButton").on("click", function(){
if ($('.myInput').val().trim().length < 1){
alert("Input is empty")
return;
}
//Do your code
});
});
.myButton {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<input class="myInput" type="text" value="">
<input class="myButton" type="button" value="Save Button" />
</body>
EDIT
Now, if you really need to make as you were doing before (I don't consider it a best practice and also recommend you to rethink if you really wanna go through this) here goes a code that will help you. Click to show.
Here I added the functions and created the button element (if necessary) then append it to DOM just when the input have some value length.
function myFunction(input){
var btnElem = $(".mySaveButton")[0];
if (!btnElem){
btnElem = document.createElement("button");
btnElem.textContent = "Save Button";
btnElem.onclick = btnClicked;
btnElem.className = "mySaveButton";
}
var charLength = input.value.length;
if (charLength > 0){
document.body.append(btnElem);
}else {
btnElem.remove();
}
};
function btnClicked(){
if ($('.myInput').val().trim().length < 1){
alert("Input is empty")
return;
}
//Do your code
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<input class="myInput" type="text" value="" onkeyup="myFunction(this)">
</body>
So I think you just want a button to show to the user once they type something in the text box. If that's the case, then you don't really want to append a button every time they press a key in the box.
Instead I'd make a button and set its css to display none and then when they keydown in the text box change the button's css to display block.
Something like this: http://jsfiddle.net/wug1bmse/10/
<body>
<input type="text">
<input class="myButton" type="button" value="button text" />
</body>
.myButton {
display: none;
}
$(function(){
$('input').on('keypress',function(){
var htmlElement= $('.myButton');
htmlElement.css('display', 'block');
});
});
Hiding the element with a class might be easier:
.btn-hidden {
display: none;
}
<input id="save-button" class="btn-hidden" type="button" value="save" />
function showSave() {
$('#save-button').removeClass('btn-hidden');
}
function hideSave() {
$('#save-button').addClass('btn-hidden');
}

javascript click nearest asp button

I have javascript that will fire an alert box when the enter key is pressed within a telerik RadAutoCompleteBox. When enter is pressed i need to find the nearest asp.net (input button) and click this. Any Suggestions?
<script>
$(document).ready(function () {
var handler = Telerik.Web.UI.RadAutoCompleteBox.prototype._onKeyDown;
Telerik.Web.UI.RadAutoCompleteBox.prototype._onKeyDown = function (e) {
handler.apply(this, [e]); // Let AutoCompleteBox finish it's internal logic
if (e.keyCode == Sys.UI.Key.enter) {
this._onBlur();
alert('Enter has been pressed inside RadAutoCompleteBox');
}
}
});
</script>
I'm not sure this is what you are looking for since it requires jQuery, at any rate here are 2 options. One going through a parent element and then looking through the child elements, the second if they are on the same level through siblings.
$('#textbox').on('keyup', function() {
$(this).parent().find('input[type="button"]').click();
});
$('#thebutton').on('click', function() {
alert('the click happened');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
<input type="text" id="textbox">
<input type="button" id="thebutton" value="click me">
</div>
$('#textbox').on('keyup', function() {
$(this).siblings('input[type="button"]').click();
});
$('#thebutton').on('click', function() {
alert('the click happened');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="textbox">
<input type="button" id="thebutton" value="click me">
You can use closest() to find the nearest "button type" input or button tag
if (e.keyCode == Sys.UI.Key.enter) {
// Code
var input = $(e.target).closest('input[type="button"],input[type="submit"],button');
if (input.lenght > 0) {
input.click();
}
}
This will search the element itself and later will traverse up through its ancestors in the DOM tree to find the first match and click it

How do I check if a file has been selected in a <input type="file"> element?

I have multiple checkboxes and a file upload input. I would like to re-enable a button if one or more checkbox's are checked AND if the input value is not null.
Here is a link to bootply
Here my html
<div class="upload-block">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="file" id="InputFile">
<button id="upload-btn" type="button blue-button"
class="btn blue-button" disabled>Submit</button>
</div>
Here is my javascript starting point:
Updated via Karl
Bind a change event on all input and then use some condition:
$('.upload-block input').change(function() {
$('#upload-btn').prop(
'disabled',
!($('.upload-block :checked').length && $('#InputFile').val()));
});
Example
This works for all the checkboxes and #InputFile has a value other than none. i.e. where a file has been chosen. However this does not work in IE9
How can I update this to work in IE9?
Bind a change event on all input and then use some condition:
$('.upload-block input').change(function() {
$('#upload-btn').prop(
'disabled',
!($('.upload-block :checked').length && $('#InputFile').val()));
});
Example
Like this:
if($('#InputFile').val().length){
//do your stuff
}
You can better use by using $.trim() method not to allow (trim) spaces:
if($.trim($('#InputFile').val()).length){
//do your stuff
}
Pure JS:
<input type="file" id="InputFile">
<button onclick="buttonSubmitClicked(event)">Submit</button>
<script>
function buttonSubmitClicked(event) {
if (!document.getElementById("InputFile").value) {
event.preventDefault();
alert("Please choose a file!");
} else {
alert("File've been chosen");
}
}
</script>
jsfiddle: check it out
$('.upload-block input').change(function() {
if ($('.upload-block :checked').length && $('#InputFile').val() ) {
$('#upload-btn').prop('disabled',false);
}
else {
$('#upload-btn').prop('disabled',true);
}
});
No need of separate selectors for checkbox and input file .upload-block input is enough to catch catch both the checkbox and file value change
I would apply the validation to all elements involved. This way changing either the checkboxes or the input will update disabled
$('#InputFile, .upload-block :checkbox').change(function(){
var isValid= $('.upload-block :checkbox:checked').length && $('#InputFile').val();
$('#upload-btn').prop('disabled',isValid);
});

How can show a div when input has a value?

I have an input text that and a hide div.
I want to show the div when the input text has a value.
Here is the demo: http://jsfiddle.net/vyc7N/181/
<label for="db">Type whatever</label>
<input type="text"name="amount" />
<div id="yeah" style="display:none;">
<input type="submit" />
</div>
Please somebody can help me?
You can write the code in keyup event of textbox to get the length of text entered in it.
$('input[name=amount]').keyup(function(){
if($(this).val().length)
$('#yeah').show();
else
$('#yeah').hide();
});
Working Demo
you can also use .toggle() instead of using .show/.hide():
$('input[name=amount]').keyup(function(){
$('#yeah').toggle($(this).val().length);
});
$('input[name=amount]').bind('keyup change', function(){
if(!$(this).val())
$("#yeah").css('display', 'none');
else
$("#yeah").css('display', '');
});
Working fiddle
Use following logic : If after trimming there is some value , then show else hide.
$('input[name=amount]').keyup(function(){
if($.trim($(this).val())!='')
$('#yeah').show();
else
$('#yeah').hide();
});
This is pure javascript and DOM, no jQuery
You could use onkeyup():
<label>Type whatever</label>
<input id='inptOne' type="text" name="amount" onkeyup="myFunction()" />
<div id="yeah" style="display:none">
<input type="submit" />
</div>
<script>
//if input has some value will show the button
window.myFunction = function() {
//alert('it ran!');
var hasValue = document.getElementById('inptOne').value;
if (!!hasValue) {
document.getElementById('yeah').style.display = 'inline';
} else {
document.getElementById('yeah').style.display = 'none';
};
};
</script>
Click Here for jsfiddle

Change textbox to textarea on click

How do I convert a simple text box to text area when the user clicks on it. I'm using EXT JS.
Are you doing it just for visual appearance? Or is there a valid reason for converting it from input to textarea?
If you are doing it just for the visuals of it you can get a long way with just setting the height of your textarea and in the focus event increase the height.
Ext.onReady(function(){
new Ext.form.TextArea({
renderTo: Ext.getBody(),
name: 'myTextArea',
width: 200,
height: 22,
listeners: {
focus: function(textarea){
textarea.setHeight(200);
},
blur: function(textarea){
textarea.setHeight(22);
}
}
});
});
EDIT: These stopped working:
Try it here: http://jsfiddle.net/chrisramakers/9FjGv/2/
You can even quite easily animate it for some extra fancy visualy fancy pancy.
http://jsfiddle.net/chrisramakers/9FjGv/3/
You can't change a textbox to a textarea because they are two different types of elements. You can however hide one and display the other.
<input type='text' id='myTextBox' />
<textarea id='myTextArea' />
With some function that could swap them on whatever event you want:
function swapTexts() {
var tb = document.getElementById('myTextBox');
var ta = document.getElementById('myTextArea');
if (tb.style.display !== 'none') {
tb.style.display = 'none';
ta.style.display = '';
} else {
tb.style.display = '';
ta.style.display = 'none';
}
}
show and hide is nice technic. but., u can use innerHTML property also like this...
<div id='test'> <input type="text" name="text1" id="text1" onclick="test()"/></div>
<script type="text/javascript">
function test()
{
document.getElementById('test').innerHTML = "<textarea></textarea>"
}
</script>
if u want to change again, give some condition or any event.. this may help u i think..
have a good day.....
You can have two separate controls of TextBox and TextArea in the same div (or table) and then show the TextArea on click of TextBox
<input type='text' onclick='document.getElementById("txtArId").style.display = ""' />
<TextArea id='txtArId' />
Here's an example done in jQuery.
HTML:
<tr>
<td>
<input name="textInputComment" type="text" value="">
<textarea name="textAreaComment" style="display: none;"></textarea>
</td>
</tr>
jQuery:
$(document).ready(function()
$(document).on('focusin', 'input[name=textInputComment]', function () {
$(this).hide();
textarea = $(this).closest('tr').find('textarea[name=textAreaComment]');
textarea.show().focus().val($(this).val());//show, focus and get value from input
});
$(document).on('focusout', 'textarea[name=textAreaComment]', function () {
$(this).hide();
textarea = $(this).closest('tr').find('input[name=textInputComment]');
textarea.show().val($(this).val());//get value from textarea
});
});

Categories

Resources