Auto-highlight an input field on focus - javascript

I was wondering if there was a way for text inside a input box (pre loaded using value="") to highlight when the user clicks on it?
input type='text' name='url' id='url' value='http://www.a-link.com/' />
EDIT
I need the text to he highlighted so the user can copy it.

<input type="text" name="textbox" value="Test" onclick="this.select()" />

You could attach javascript to the click event to select the text like so:
$(document).ready( function() {
$('#id').click( function( event_details ) {
$(this).select();
});
});
There is a potential issue where the user could be trying to click at a later point in the text to correct a typing mistake and end up selecting the whole thing. A better way would be to trigger this when the input gets focus from the user. you'd replace .click with .focus in the example above.
jQuery event documentation:
http://api.jquery.com/category/events/

Add the following onclick attribute to make the entire <input> automatically highlight when the user clicks on it:
<input type="text" value="Test1" onclick="this.select()" />
Alternatively, if you want the user to be able to change the selection after the initial click, change the onclick attribute to an onfocus attribute. This will also highlight the entire <input> when the user clicks on it, but it allows them to change the highlighted part manually afterwards:
<input type="text" value="Test2" onfocus="this.select()" />
Here is an example of both inputs in action.

You want to use focus property. Like this: http://jsfiddle.net/sCuNs/
html
<p><input type="text" size="40"></p>
css
input:focus, textarea:focus{
background-color: green;
}

Do you mean to select the text?
Use onclick event to fire the code:
document.getElementById("target-input-id").select();

$('#foo').on('mouseup', function(e){
e.preventDefault();
$(this).select();
});
$('#foo').on('mouseup', function(e){
e.preventDefault();
$(this).select();
});

This should do it:
<input type='text' name='url' id='url' onclick="this.select()" value='http://www.a-link.com/' />

<input id="inputField" type="text" size="40" value="text to be highlighted"></p>
document.getElementById('inputField').focus();
The default behavior for focus selects the text in the input field. I was looking for a solution not to do that when I found this.

Related

How can I do something on input checkout?

Here is my code:
$(document).on('checkout', 'input', function(){
alert('input is not focused anymore');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" />
But that alert won't be shown when I checkout of that input. I mean nothing happens when I click everywhere except focus on the input. Sorry I don't know English as well and I cannot explain what exactly I want. I want to apply something like stackoverflow's search box.
As you can see it in the top of current page, when you click on the search input (which is into stackoverflow's header), the width of the input will be increased (and some other css properties will be set), and when you click on somewhere else (checkout event ), the width will be toggled. I want to do something like this anyway.
Why checkout event has no reaction in my code?
There is nothing like checkout event, its blur i.e. focus lost for an input element. It is triggers when the input lost focus.
$('input:text').bind('focus blur', function() {
$(this).toggleClass('red');
});
input{
background:#FFFFEE;
}
.red{
background-color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input class="calc_input" type="text" name="start_date" id="start_date" />
<input class="calc_input" type="text" name="end_date" id="end_date" />
<input class="calc_input" size="8" type="text" name="leap_year" id="leap_year" />
</form>
Check the above example, in this the color of input is changed on focus and re-changed on blur. In the same way you can increase the width of input and vice versa.

Copy Text from Input form into DIV

I want to create 1 input field and one Div.
When u write text in the Input and hit the button i want the text to be displayed in the DIV. Its so simple but it just won't work.. i hope someone can do this easy task for me.
I tried last:
<form>
Bearbeitungstext: <input id="textInput" type="text"><br>
<input type="button" value="text einbinden" onclick="$('texxxt').val($('#textInput').val())">
</form>
<div id="texxxt">
</div>
Try to use id selector properly,
$('#texxxt').text($('#textInput').val());
Also you have to use .text() instead of .val(), .val() is not a function for div elements. It is for form elements which are having value property.
And the best approach for your case would be binding an explicit event handler,
var div = $("#texxxt"),inp = $("#textInput");
$("form button").click(function(e){
e.preventDefault();
div.text(inp.val());
});
This can be done with php $_GET($whatever); also, to do this you will need the name="whatever" on the input field.
Bearbeitungstext:
<input id="textInput" type="text"/><br>
<input type="button" value="text einbinden" onclick="$('#texxxt').html($('#textInput').val())"/>
<div id="texxxt">
to change DIV content we use html() not val()

is there any javascript code that click automatically in text field?

i wanna asking about if there is any javascript code that click automatically on a text field ! i wanna just that the input text will be clicked automatically to update the output text
<h:inputText id="text" value="#{lq.question}">
<f:ajax render="out5" event="click"istener="#{speechBean.getQuestionName1(lq.question)}">
</f:ajax>
</h:inputText>
<h:outputText id="out5"value="#{speechBean.questionName}"></h:outputText>
All you need is the focus method on the element in question.
document.getElementById('text').focus();
<input id="text" type="text" />
In JavaScript, you can trigger the onfocus event to "click inside a text field"
Since you added [jQuery] as one of your tags, I'll use it in an example:
$("textarea").focus();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea></textarea>
You can also use plain JS to trigger it, as in #colecmc's answer.

Disable input text

for some reason I want to disabled an input text and for this I use this sample code :
$('#id').attr('disabled', 'disabled');
Is there any way to disabled an input text without use attribute disabled of input text, I mean for example use css or other ways?
In fact I want an input text act like a disabled one without change it attribute?
With Best Regards.
Try:
<input id="myTxt" type="text" onfocus="this.blur()"/>
Or by JS:
$('#myTxt').focus(function(){
$(this).blur();
});
You can't do it through CSS (unless you do something very complicated like hide the input and put a disabled-looking rectangle in its place). However, this will disable the input without changing the attribute:
$("#id").prop('disabled', true);
try this
<input type="text" disabled="disabled" value="" />

jQuery selector - input field

I'd like to enable the textbox when it is clicked. However, when I click the textbox, nothing happens. I believe it is a problem with the jQuery selector. Why isn't this working?
<script>
$(document).ready(function() {
$(':input').click(function() {
$(this).removeAttr('disabled');
});
});
</script>
<input type="text" value="123" disabled="disabled" />
Note: I tried both $('input') and $(':input') to select the textfield. Neither worked.
A disabled input isn't going to fire events. Try changing from disabled to readonly.
It has nothing to do with the selector you're using, but rather because, since the input element is disabled, the events for the input will not fire - see: http://www.jsfiddle.net/DvZDh/
<input type="text" value="123" disabled="disabled" />
<input type="text" value="123" />
The code works on the second input element, but not the first. A simple solution would probably be to use CSS to simulate the disabled state instead.

Categories

Resources