I have input and text boxes which have different placeholders like "number of reps", "time needed in secs" etc.
<input type="text" id="sets" placeholder="Number of sets">
<textarea id="textarea" placeholder="write"></textarea>
I have built a click event so that whenever any box is clicked, its placeholder becomes blank so user inputs a value like so:
textarea.addEventListener("click",checkInput);
sets.addEventListener("click",checkInput);
function checkInput(e){
e.currentTarget.placeholder="";
}
^^made a single function that can be used for both textarea and sets
How can I get the placeholder back if the user clicks a box but doesn't type in a value and moves on to another item (blur event) by using a single function for all the items like so:
textarea.addEventListener("blur",originalValue);
reps.addEventListener("blur",originalValue);
function originalValue(e){
e.currentTarget.placeholder= default value/original value;
}
Try out this textbox
<input type="text" placeholder="Enter a value">
As you can see there is no code whatsoever, and it does exactly what you want; if a user enters any text the placeholder is removed. If the user enters no text (or removes existing text) the placeholder is restored on blur.
I seriously don't understand why you even began to write code around this!
If you just want to confuse your users, take a copy of the placeholder into the element before clearing it and restore it on blur.
textarea.addEventListener("click",checkInput);
sets.addEventListener("click",checkInput);
textarea.addEventListener("blur",restore);
sets.addEventListener("blur",restore);
function checkInput(e){
e.currentTarget.originalPlaceholder = e.currentTarget.placeholder
e.currentTarget.placeholder="";
}
function restore(e){
e.currentTarget.placeholder = e.currentTarget.originalPlaceholder;
}
<input type="text" id="sets" placeholder="Number of sets">
<textarea id="textarea" placeholder="write"></textarea>
I think this is a terrible idea FWIW!
Related
I need to set focus on an input field.
After pressing the button, this method works for me.
function createNewDiv() {
document.getElementById('myButton').blur(); ---- here I remove the focus from the button. Because the browser writes an error that an element with focus already exists
const body = document.createElement('template');
body.innerHTML = `
<div>
<input type="text" tabindex="2" onblur="document.getElementById('inputId').focus()" autofocus="autofocus" class="someClass" id="inputId" placeholder="some text" required>
</div>
`;
...
}
It creates a block that contains an input field. I want this input to be in focus.
In the safari browser it works and the focus is set. But in google chrome does not work.
I'm going to ignore your supplied code because it is incomplete rubbish with important parts missing, invalid quotes, and many errors!
So I'll just inform that in the Chromium + Mozilla world, to set focus on an element we do this...
e.focus(); e.select();
I have a form where when user can enter value and then use tab indexing to move to the next input text box. When moving the to the next text box, the value of previous text box should be updated to a bean and at the same time I want to get the value from that bean. I tried few things but no luck. I am also not sure whether my approach is right. I think something is wrong with my set property. Please advise.
<%String area = "locality";%>
<input type="text" id="area" class="form-control" placeholder="Area" value="<%=area%>" name="areaname" />
<script >
$("#area").blur(function() {
<jsp:useBean id="profcontact" class="com.get.ProfileFormContact" >
<jsp:setProperty name="profcontact" property="area" value="${param.areaname}" />
</jsp:useBean>
$("#area").val("<jsp:getProperty name="profcontact" property="area" />");
});
</script>
I have a simple <input type="text"> field in my html code with onChange property set to call javascript function, which takes the text and displays it. So, how it looks like currently:
<input type="text" id="inputField" onChange="displayText()"></input>
<span id="toDisplay"></span>
and javascript:
function displayText() {
var text = document.getElementById("inputField").value;
document.getElementById("toDisplay").innerHTML = text;
}
So the text in the span is updated when the user presses enter.
Is there a way of doing a "real-time" update? In other words, I would like the text to appear in the span as soon as the user enters it.
<input type="text" id="inputField" onKeyUp="displayText()"></input>
UPDATE: I got in contact with the developer and he said to use this code as a foundation:
(function($) {
$('.jr-page').on('keyup','.jrAutoSuggest',function(){
$(".customfield").val($(this).val());
});
})(jQuery);
It doesn't work at the moment and I'm not sure why but you can also see my original post below this text for more details and I appreciate all of your help:
I am trying to copy one input field to another when a user types. I would like to accomplish something like this: http://jsfiddle.net/bxHQ5/ Notice that when you type into the input box on the left, it duplicates the text on the right.
To be more specific, on my website, I am using this form
I want what the user types in the "Car Manufacturer" input box to directly be copied to the "Testfield" input box as they type. Also, the "Testfield" input box text cannot be deleted or altered by the user once text is inputted in the car manufacturer field. They both have to be exactly the same.
Please note that the car manufacturer input field shows a hidden input which the user cannot see and should be ignored in this case. If you look at the HTML, the car manufacturer input looks like this:
<input id="myrelatedfield" class="jrAutoSuggest ui-autocomplete-input acInstructions" type="text" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true"></input>
You'll notice I put my own customer ID in there called "myrelatedfield" The field it needs to copy text to looks like this which has a custom class "jr_testfield"...
<input class="jr_testfield jrText" type="text" data-click2add="0" name="data[Field][Listing][jr_testfield]"></input>
Thanks!
I ave updated the code
have a look at it
http://jsfiddle.net/vishalgupta358/bxHQ5/383/
$("#EmailAddress").keyup(function(){
$("#Username").val($(this).val());
});
Use readonly="true" property to prevent write access.Input value will also be available when u submit the form
HTML:
<input type="text"id="EmailAddress" name="EmailAddress" value="" >
<input type="text" id="Username" readonly="true" name="Username" value="">
Script:
$("#EmailAddress").keyup(function(){
$("#Username").val($(this).val());
});
DEMO
OK, I know how to detect keyboard input. I know how to focus on keyboard input.
But I want to know what the best practice is for detecting keyboard input => focusing to textarea or textfield => AND enter that key into the field.
Here's how it would work: I'm on a page. I type A. Then my textfield gets focused and A is typed into the field. This sounds trivial but actually I haven't found a simple way to do this. The reason is because the initial keyboard input event is not directed towards the textfield, and I need to propagate that event to the newly focused text field.
Is there a conventional approach to doing something like this?
Sample html:
<form>
<input type="text" />
<input type="text" id="thisguy" />
<input type="text" />
<input type="text" />
</form>
jQuery for above html
$(document).live('keypress', function (e) {
$('#thisguy').val($('#thisguy').val() + String.fromCharCode(e.which));
});
Needs to be cleaned up. Maybe set focus instead of changing the text value.