I have a <input type="text"> and if user clicks inside it I want to make the content (value) of that box selected. How would I do that?
<input type="text" onclick="select()"/>
Try select method:
document.getElementById("myinput").onclick = function() {
this.select();
};
You can try following code inside a javaScript method, and call the method onClick event of the textbox...
function calledOnClick(){
document.getElementById('test').select();
}
You can try following jQuery code which automatically call on page load
<script>
$(document).ready(function(){
$('input').each(function(){
$(this).click(function() {
this.select();
});
});
$("#return_date").focus();
});
</script>
Related
Hello I would like the text inside an input element to highlight upon initial click. However my function does not seem to be working. I have researched the issue and seen that there are some issues with jquery 1.7 and below. I have adjusted it to account for this any it still does not work.
Any help would be great. Thanks!
HTML
<input type="text" value="hello"/>
JS
$scope.highlightText = function() {
$("input[type='text']").on("click", function() {
$(this).select();
});
https://plnkr.co/edit/b7TYAFQNkhjE6lpRSWTR?p=preview
You need to actually call your method at the end of controller, otherwise the event is not bound.
https://plnkr.co/edit/a0BlekB8qTGOmWS8asIx?p=preview
... other code ...
$scope.highlightText = function () {
$("input[type='text']").on("click", function () {
$(this).select();
var test = $(this).parent();
console.log(test);
});
$("textarea").on("click", function () {
$(this).select();
});
};
$scope.highlightText();
};
To select the text inside an input you would simply call this.select() from onclick like shown below
<input type="text" onclick="this.select()" value="hello"/>
I want a functionality that i will type some text on the textbox and the value will be picked up by the jquery and will be stored in some variable ,how to achieve that? i am using jquery bind function but it is not suiting my purpose .
This is my textbox
<aui:input inlineField="true" label="" name="interviewCC" id="interviewCC" size="45" value=""></aui:input>
and i am using this jQuery function
$("#interviewCC").bind("click", function () {
value = $("#interviewCC").val();
alert(value)
});
but it is not picking the value i want that when i will type something on the textbox that value will be picked up.Please somebody help.
The problem is that you listen to the 'click' event and not the 'keypress' event.
Try this:
$('#interviewCC').keypress( function(e) {
var value = $("#interviewCC").val();
alert(value)
});
Use
$("#interviewCC").keypress(function () {
value = $("#interviewCC").val();
alert(value);
});
You can use the jQuery function .keyup() which will figure out when a key has been pressed and then the press has finished.
$(document).ready(function() {
$('input#text').keyup(function() {
$('.output').text($(this).val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="text" type="text" />
<div class="output"></div>
.keyup() Documentation
I would like to add an onchange event to those input fields without jquery:
<input type="text" id="cbid.wizard.1._latitude">
<input type="text" id="cbid.wizard.1._longitude">
I can already call the object with
<script type="text/javascript">
alert(document.getElementById('cbid.wizard.1._latitude').id);
</script>
In the end, I want to add this behaviour, that if you enter a pair of coordinates into the first input, I will spread the pair over the two input fields?
How do I add an onchange event with javascript?
Ummm, attach an event handler for the 'change' event?
pure JS
document.getElementById('element_id').onchange = function() {
// your logic
};
// or
document.getElementById('element_id').addEventListener(
'change',
callbackFunction,
false
);
jQuery
$('#element_id').change(function() {
// your logic
});
Note
Note, that change event on the text field will be fired after the blur event. It's possible that your looking for keypress event's or something like that.
document.getElementById('cbid.wizard.1._latitude').onchange = function(){
//do something
}
GlobalEventHandlers.onchange docs
or
document.getElementById('cbid.wizard.1._latitude').addEventListener("change", function(){
//do something
});
EventTarget.addEventListener docs
use addEventListener in your window.onload
window.onload=function(){
document.getElementById('cbid.wizard.1._latitude').addEventListener("change", function(){
//do something
});
};
addEventListener
Please try with the below code snippet.
<body>
<input type="text" id="cbid.wizard.1._latitude">
<input type="text" id="cbid.wizard.1._longitude">
<script type="text/javascript">
var txt1 = document.getElementById('cbid.wizard.1._latitude');
txt1.addEventListener('change', function () { alert('a'); }, false);
</script>
</body>
I want to display changing text into another text box
I tried here for evey possible combination. But didn't work.
/*$('input#list_val').keyup(function() {
//perform ajax call...
// alert("Hello");
$('#list_v').text($(this).val());
});*/
$('input#list_val').keydown(function() {
//perform ajax call...
//alert("Hello");
$('#list_v').text($(this).val());
});
<input type='text' id="list_val" />
<input type='text' id="list_v" />
It should be val() for adding value to input and use keyup rather than keydown to show value in other input immediately
$('input#list_val').keyup(function() {
$('#list_v').val($(this).val());
});
Demo Fiddle
use .val() and .keyup (using keydown doesn't register the newest value, it registers the value before so keyup is better to use for this)
$('#list_val').keyup(function() {
$('#list_v').val(this.value);
});
DEMO
change from :
$('#list_v').text($(this).val());
to:
$('#list_v').val($(this).val());
var $list_v = $('#list_v');
$('input#list_val').keyup(function() {
$list_v.val($(this).val());
});
Demo: Fiddle
Try This
js
$('#list_val').keyup(function() {
$('#list_v').val($('#list_val').val());
});
Demo
Try this:
$('input#list_val').keydown(function() {
var text = $("input#list_val").val();
$('#list_v').html(text);
});
Your code is perfect, Just need to change small things in your code :
$('#list_val').keydown(function() {
$('#list_v').val($(this).val());
});
I've got a small piece of code here
<label for="pass">Password</label>
<input type="text" id="pass" value="QWERTY">
<button for="pass">Submit!</button>
and jquery action
$("button").click(function(){
var value=$("input[id=pass]").attr("value");
if (value==="QWERTY"){
alert("Good!");
};
and it doesnt work. Do you know how to fix it?
Try this.
$("button").click(function(){
var value=$("input#pass").val();
if ( value === "QWERTY"){
alert("Good!");
}
});
jQuery has it's own built in function for fetching values from input fields.
You should prevent the default action from triggering when the button is clicked (otherwise the form will be submitted, and the JS will not execute). You should also use val() when accessing an input's value.
You should also wrap your code inside the DOMReady handler, to ensure that the DOM is accessible when your script is run.
Here's an updated version of your code:
$(function() {
$("button").click(function(e) {
e.preventDefault();
var the_value = $("#pass").val();
if(value == "QWERTY")
{
alert("Good!");
}
};
});
Try this : It's more optimized...
$("button").click(function(e){
e.preventDefault();
var value=$("#pass")[0].value;
if (value==="QWERTY"){
alert("Good!");
};
You can also remove the "for" attribute on the button, it's non correct ;)
Your code should work if you don't forget the }); at last and have put the code into dom ready callback function. The demo.
And you could write it like below:
$("button").click(function(){
if ($('#pass').val()==="QWERTY"){
alert("Good!");
};
});
I think you just have a syntax error. You need to make sure you close your function curly brace and your click close paren.
$("document").ready(function () {
$("button").click(function () {
var value = $("input[id=pass]").attr("value");
if (value === "QWERTY") {
alert("Good!");
}
});
});
Example:
http://jsfiddle.net/pandaPowder/5VjeD/3/