I am working with an HTML input element that is about 10 to 12 characters in size. A user is free to enter any length of string into this field. However, when the user is finished and leaves focus of the textbox, the field shows the latest portion of the string. I want it to show the initial part of the string.
Is this possible?
Sample HTML:
<label><input type="text" name="input" id="text_field" /></label>
One jQuery, dirty&hack-ish, but working solution (not sure about CSS or other possibilities):
$('body').on('blur','#text_field', function() {
new_field = $(this).clone();
$(this).remove();
$('label').append(new_field);
});
DEMO> http://jsfiddle.net/9zswjtqe/4/
Idea is - clone (deep) element on blur, remove it, and attach new element/clone (with desired text position this time). Tested in Firefox, IE, Chrome. Works fine.
Related
I'm using EmberJS for my webapp and when I create a new record (set in edit mode), my first field (input text) has the autofocus="autofocus" parameter set. It works on Chrome the first time without problem, but not after.
The page loads once because it's an Ember app, and the views (record views) are being re-generated when I create a new record.
Any idea how to resolve this issue?
EDIT:
I have removed the autofocus property, and tried only to use Jquery focus() like in https://stackoverflow.com/a/14763643
App.FocusedTextField = Em.TextField.extend({
didInsertElement: function() {
this.$().focus();
}
});
Now, there is no focus even the first time. Also, if I tried replacing this.$().focus(); with this.$().hide();, then the input is hidden. this.$() in the console shows the right input as well, but focus() just does not work!
I would consider moving your input to a view or a component and then do something like this.$().focus(); in the didInsertElement function.
I came across the exact same issue with autofocus but the .focus() function did work for me. Here's how I coded it:
html:
<input type="text" id="idTextbox"/>
javascript:
$('#idTextbox').focus();
I would like to
(1) not show any suggestions to the user while typing in an input field.
This can be done like this:
<input autocomplete="off">
However, I noticed that this also
(2) disables the history chaching, e.g. when you go to another site and click on the history back button the input field will be empty.
You can try it here:
http://jsfiddle.net/LC53F/
Only text inserted into the first field will survive going to a new page and back again.
Is there a way to only have effect (1), but not (2)?
This solution should work, but is not ideal: just sharing an idea.
I don't think you will be able to preserve history with 'autocomplete', so let's try to fiddle out something.
Here's an idea: the history is based on input names, so you can turn off the autocompletion from other sites by using an uncommon name (but still constant, for example: 'email_fakeSuffix_194h5g48').
Then, to turn off autocompletion from this input previous values, you can change its name everytime the page is loaded (ie. append a random number). The problem is that, doing this, you will also turn off the history.
So, the main idea is to use an uncommon input's name and to change it just before submitting the form:
The value won't be saved by the browser because the name has changed
If you navigate to another page without submitting, the value will
still be set because you haven't change the name yet.
Here's an example using JQuery (you can use anything else, or even vanilla JS)
JSFiddle: http://jsfiddle.net/vse9jx3r/
HTML
<form>
<input id="input1" name="email_fakeSuffix_194h5g48">
<input name="input2">
<input type="submit">
</form>
JS
$('form').submit(function() {
$('#input1').attr('name', 'email_fakeSuffix_194h5g48_' + Date.now());
//SUBMIT THE FORM (MAY DO NOTHING AT ALL)
});
You can tell me if I'm not clear enough.
This works for me (using jQuery 1.9.1):
$(function(){
$('input[type=text]').prop('autocomplete','off');
$('#formid').on('submit', function(e){
$('input[type=text]').removeProp('autocomplete');
});
});
Thanks for spending time to read this
I have a form where is call a JS function to copy the html content of a DIV to a hidden form field so that I can submit this with the form. It works fine on desktop webkit broswers and also on mobile safari on iPad. However when I run the application in fullscreen mode (by saving a shortcut on home screen), this does not work.
Here's my code
JS function:
function update_script_in()//copies scripts and submits the form
{
$("#script_in").html($("#scriptContent").html());
$('#ResiForm').submit();
}
form submission:
<input type=submit value="Submit" onclick="update_script_in()">
Thanks for your help
This is quite old, but after googling around to solve the same issue for me, I have not found a solution. Looks like some weird behaviour from iPad (easily reproducible, no way to fix, at least that I found): the target input field gets changed indeed, but the posted value is the original one (???)
So just in case a workaround is useful to somebody, instead of applying the changes from the contenteditable div on form submit, I apply the changes whenever the div is changed (no on change event for contenteditable divs, so really it is done on blur event):
<div id="editor_inline_core_body" class="inputbox editor-inline" contenteditable>[initial value here]</div>
<input type="hidden" id="jform_core_body" name="jform[core_body]" value="[ initial value here]" />
<script>
jQuery('#editor_inline_core_body').blur(function() {
var value = jQuery('#editor_inline_core_body').html();
jQuery('#jform_core_body').val(value);
return true;
});
</script>
Less efficient, but at least it works. If you want a bit more of efficiency, you can check old and new values using also focus event, but at least I do not think it is a big deal or worth the added complexity.
When a web form is written to the browser, the browsers remembers what the initial values are of a text INPUT box. ie. when it receives HTML like this:
<input type="text" value="something">
The browser remembers "something" as the initial/default value. When the user starts typing over it, then hits ESC, the browser reverts the field to the initial value (or blank if it was initially blank of course).
However, when creating a text input box programatically, hitting ESC always seems to blank the box, even if I create it with a default value like so:
$('<input type="text" value="something">')
The browser doesn't count this as a default value and doesn't revert to it when hitting ESC. So my question is, is there a way to create a text box in code and somehow assign it a default value, so the ESC key works as if the browser received it in the HTML document?
You might looking for the placeholder attribute which will display a grey text in the input field while empty.
From Mozilla Developer Network:
A hint to the user of what can be entered in the control . The
placeholder text must not contain carriage returns or line-feeds. This
attribute applies when the value of the type attribute is text,
search, tel, url or email; otherwise it is ignored.
However as it's a fairly 'new' tag (from the HTML5 specification afaik) you might want to to browser testing to make sure your target audience is fine with this solution.
(If not tell tell them to upgrade browser 'cause this tag works like a charm ;o) )
And finally a mini-fiddle to see it directly in action: http://jsfiddle.net/LnU9t/
Edit: Here is a plain jQuery solution which will also clear the input field if an escape keystroke is detected: http://jsfiddle.net/3GLwE/
This esc behavior is IE only by the way. Instead of using jQuery use good old javascript for creating the element and it works.
var element = document.createElement('input');
element.type = 'text';
element.value = 100;
document.getElementsByTagName('body')[0].appendChild(element);
http://jsfiddle.net/gGrf9/
If you want to extend this functionality to other browsers then I would use jQuery's data object to store the default. Then set it when user presses escape.
//store default value for all elements on page. set new default on blur
$('input').each( function() {
$(this).data('default', $(this).val());
$(this).blur( function() { $(this).data('default', $(this).val()); });
});
$('input').keyup( function(e) {
if (e.keyCode == 27) { $(this).val($(this).data('default')); }
});
If the question is: "Is it possible to add value on ESC" than the answer is yes. You can do something like that. For example with use of jQuery it would look like below.
HTML
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<input type="text" value="default!" id="myInput" />
JavaScript
$(document).ready(function (){
$('#myInput').keyup(function(event) {
// 27 is key code of ESC
if (event.keyCode == 27) {
$('#myInput').val('default!');
// Loose focus on input field
$('#myInput').blur();
}
});
});
Working source can be found here: http://jsfiddle.net/S3N5H/1/
Please let me know if you meant something different, I can adjust the code later.
See the defaultValue property of a text input, it's also used when you reset the form by clicking an <input type="reset"/> button (http://www.w3schools.com/jsref/prop_text_defaultvalue.asp )
btw, defaultValue and placeholder text are different concepts, you need to see which one better fits your needs
I have a bunch of optional "write-in" values for a survey I'm working on.
These are basically a radio button with a textbox within the answer field - the idea being that you would toggle the button and write something into the box.
What I'd like to do is have the radio button toggled whenever a user clicks in the text field - this seems like a use-case that makes a lot of sense.
Doing this:
<input type="radio" id="radiobutton"><label for="radiobutton">Other: <input type="text" id="radiobutton_other"></label>
works fine in Chrome (and I am guessing, other WebKit browsers as well), but there are weird selection issues in Firefox, so I'm assuming its a non-standard practice that I should stay away from.
Is there a way to replicate this functionality without using JavaScript? I have an onclick function that will work, but we're trying to make our site usable for people who might have NoScript-type stuff running.
Putting an input inside a label actually has a slightly different meaning. It doesn't make the input itself a label, it implicitly associates the label with the input in the same way as if they were linked by a for/id.
However, this only happens when the label doesn't already have a for attribute to override that (see HTML4 s17.9: “When present, the value of this attribute must be the same as the value of the id attribute of some other control in the same document. When absent, the label being defined is associated with the element's contents.”). It is unclear according to spec what should happen when both containment and for are present.
(And also it doesn't work in IE, which makes the point moot in practical terms.)
No, you'll need some scripting for this.
<input type="radio" id="radiobutton">
<label for="radiobutton_other">Other:</label>
<input type="text" id="radiobutton_other">
<script type="text/javascript">
var other= document.getElementById('radiobutton_other');
other.onchange=other.onkeyup= function() {
if (this.value!=='')
document.getElementById('radiobutton').checked= true;
};
</script>
It (an input inside a label) validates just fine as HTML 4.01. One potential issue I can see with your code is that both radio elements have the same ID in your example. Element IDs must be unique in HTML and XHTML documents and you should use the name attribute instead to identify a radio group.
If you are still having trouble after changing this, you will have to move the input outside of the <label> element and use scripting.