I have the following JS :
document.getElementById('sketchpad-post').setAttribute('value','')
The HTML input is as follow:
<input type="text" id="sketchpad-post" autocomplete="off" value="" placeholder="Message"/>
If the second argument of the setAttribute function is an empty string, like in the example above, it doesn’t work : it doesn’t empty the text field (the text field has a previously set value).
Now if the second argument is a non-empty string, then, it works : it sets my text field to the provided value.
I find this behavior particulary strange…
I tried to enforce autocomplete="off" (and even autocomplete="flu") doing a setAttribute and also to do a removeAttribute('value') but I still cannot manage to have this field blank when the user display it.
As a workaround I can set the value to a kind of placeholder like '…' or whatever other character (an non-breakable space maybe?) but it’s not very nice.
I have this behavior in both latest Chrome (Chromium) and Firefox.
Any idea ?
document.getElementById('sketchpad-post').value = "";
Related
I'm not new to HTML but I always get confused with input elements, below is some html:
<input id="firstTest" />
<input id="secondTest" value="Hello"/>
so for the firstTest input, I typed some text like "Hi",then do:
let firstInput = document.getElementById('firstTest');
console.log(firstInput.value) //produces "Hi"
but for the secondTest input, I did the same thing but the value is always "Hello" and I can't type anything into the input field.
So my questions are:
Q1-why for the firstInput, I didn't specify a value attribute but the value can change depending on what I typed?
Q2-when I type sth into the field, what actually happened? How browser display the thing I type?
does input object in DOM get its value property updated automatically then the browser displays the latest value on screen?
Q3-if input object in DOM get its value property updated automatically, why on the secondInput that has a value attribute couldn't get its value property updated automatically?
Q1-why for the firstInput, I didn't specify a value attribute but the value can change depending on what I typed?
The value HTML attribute serves only for the purpose of defining an initial value. input elements have a Javascript API, and in this, there is a value property (which you are using in your console.log). This value property constantly reflects whatever is in the input. If you want to know what is in the value attribute, there's two ways to find out:
el.getAttribute('value');
or, using the aforementioned API
el.defaultValue;
Q2-when I type sth into the field, what actually happened? How browser display the thing I type? does input object in DOM get its value property updated automatically then the browser displays the latest value on screen?
That's a matter of how the browser handles it internally. This is an implentation detail which is never relevant for the web developer. It is laid out in the specification for that element.
Q3-if input object in DOM get its value property updated automatically, why on the secondInput that has a value attribute couldn't get its value property updated automatically?
Given the code you show here, that cannot be the case. The only ways to disable typing in an input is if the input has a disabled or readonlyattribute, or if someone has added a keydown listener that calls event.preventDefault().
If this does not fully answer your question, please leave a comment stating what is remaining unclear or unanswered.
I want to change the input of a text field that stores the subject line in the Outlook Web App using JavaScript:
This subject text field is defined as:
<input tabindex="0" class="_f_ql _f_rl textbox allowTextSelection placeholderText" role="textbox" aria-labelledby="MailCompose.SubjectWellLabel" autoid="_f_B2">
I have tried the following using my JavaScript code:
textFieldElement.value = "Example";
textFieldElement.innerHTML = "Example";
textFieldElement.innerText = "Example";
These work to set the value as far as the user interface is concerned:
But they don't modify the "real" value of the subject that gets posted when you hit Send. Once you hit the Send button, the subject takes on no value (and shows up as (no subject) in an email). I can see from the POST request that unless I manually click on the element, focus it, and manually type in what I want it to display, physically with the keyboard, it won't send the subject argument in its JSON object.
How can I modify the "real" subject value that this control is expected to handle? I'm guessing this is an MVC control or some other type of ASP.NET control...and I am trying to modify the .aspx page, with JavaScript, to edit this value.
------------------------------------------------------------------------------------------------------------------------------------------------
Edit: I have only been able to set the subject line in one specific case. First, I need to physically click on the subject element. I've noticed this has a strange behavior of setting the class on this element from this:
<input class="_f_ql _f_rl textbox allowTextSelection placeholderText" autoid="_f_B2" role="textbox" tabindex="0" aria-labelledby="MailCompose.SubjectWellLabel">
To this:
<input class="_f_ql _f_rl textbox allowTextSelection" autoid="_f_B2" role="textbox" tabindex="0" aria-labelledby="MailCompose.SubjectWellLabel" maxlength="255">
Once it is in the non-placeholderText state with maxlength = "255", I am able to successfully change the innerText on it using textFieldElement.innerText = "Example";, and on submit, this gets sent correctly.
However, I cannot assume that the Subject element will ever be clicked, so I must work with the placeholderText version of the subject element first and somehow get it to reproduce this behavior where it goes into the other state. So far, I have tried the following without success:
Focusing the placeholderText subject element, then setting its innerText.
Changing the placeholderText subject element's attributes to match the non-placeholderText version of it, then setting its innerText.
http://msdn.microsoft.com/en-us/library/office/fp161027(v=office.1501401).aspx
Looks like you need to use
Office.context.mailbox.item.subject to set the subject. Outlook uses an API, so you need to use the API methods.
I'm working on dynamically creating a form with Angular (1.3b17). I'm storing my form's schema in an object, and including several properties that define my fields' behavior within that schema, for instance a field will have "type" (text, textarea, check, etc) and "maxlength" properties. I then set the angular attributes for my elements to the respective property for my object (ng-maxlength="field.maxlength" for instance).
I've noticed something a bit weird, and I wanted to see if this is working as intended. When the attribute is set, but no value is specified (ng-maxlength="") then $error is set to true immediately after typing anything, as it expects a maximum length of 0. Similarly, using an expression (ng-maxlength="field.maxlength") behaves in the same way if the property isn't set.
I've created a simple Plunker so you can see what I'm referring to. I would personally expect there to be no maxlength checks if the value isn't set, even if the attribute is present.
<input id="txtName" ng-model="myval" type="text" name="name" ng-maxlength="" /><br />
{{myForm.name.$error}}
Or
<input id="txtName" ng-model="myval" type="text" name="name" ng-maxlength="someundefinedvalue" /><br />
{{myForm.name.$error}}
Of course, I could work around this by setting ng-maxlength to something large, but it doesn't seem ideal. Is there a reason for this behavior? Or could it be a bug?
Looks like as long as you define the directive on the form control the validator is applied to it unfortunately. So, the answer to your question is, it's how it's always been, it might be considered a bug, but at this point it would be a breaking change and it's unlikely to be changed.
I am trying to understand what exactly the combination
... value id= ...
in
<input type="text" name="session_key" value id="session-key-login">
does. Note, that the value is immediately followed by id.
My problem is whenever such a combination occurs in an input field (for example in Facebook login page "email or phone" field (only) and everywhere in the LinkedIn login page), the
document.getElementById(..).focus()
method fails. I am sure the "value id" combination does something non-trivial, since Facebook uses it only for one field, while all other fields come without that empty value field preceeding id.
Thanks in advance.
They are two totally different attributes. Note that attributes are separated by spaces, so even when specified with no = afterwards, as in your example, it's a distinct attribute, and not combined with the following one.
value defines the value of the input (the value that will be prefilled when the page is rendered). If left empty (as in your example), it does nothing. If you did, say, value="hi", however, the text box would be prefilled with "hi"
id specifies the unique identifying name of the input. It is used to access the element in the DOM, using JavaScript, e.g. document.getElementById('session-key-login')
I think I found the answer to my focus() problem.
What I found was on a page, invoking focus() once focuses on the required element. However, a second invocation on the same element fails, unless one make the page lose the previous focus explicitly, for e.g. by invoking the blur() method on the same element.
I might be wrong, but my guess is that Facebook focuses on the "email" field implicitly/automatically on load and thus my second focus does not do anything. Though it works on other fields.
So, explanation by Steven Moseley holds tight :)
Thanks,
Nikhil
I ran into a problem the other day when building a form.
The input box has a type "number".
In Chrome the input field displays up/down arrows. I could not detect change when either the up or down buttons were clicked, so I used CSS to remove the buttons. That was pretty simple, but it did not resolve all of my problems.
I do some validation on the field (using keyup). If I enter a number in the field it works fine, but if I enter a letter into the field I cannot detect it.
Using .val() works fine in FF and IE to get the field's value (number or letter), but in Chrome, not so much.
If there is a letter in the field I cannot find a way to clear the field either. Using .val('') simply moves the cursor to the left.
As I said, this problem is specific to using Chrome. For all other browsers my code works fine.
Any suggestions on code that can be used to resolve this problem?
The issue all revolves around the input being of type "number".
The HTML5 draft defines:
The value sanitization algorithm is as follows: If the value of the element is not a valid floating point number, then set it to the empty string instead.
http://www.w3.org/TR/html5/forms.html#number-state
Trying to do a .val() to retrieve a type=number input that has a non-number in it will only return the empty string. It looks like Chrome's implementation of this is to set the value of the field to empty string before any value can actually be retrieved.
As far as resetting the field using .val('') and keyup not being recognized, this code seems to work http://jsfiddle.net/hVVSA/2/
JS
var $input = $('input').keyup(function(){
console.log("here");
});
$('#clearfield').click(function(){
console.log('val was '+$input.val());
$input.val('');
});
HTML
<input type="number" />
<button id="clearfield">clear</button>