I want to adjust the number of rows in a textArea on focus on remove them on blur. In addition upon focus I want to show a hidden div layer. My current solution is
<textarea class="form-control" rows="1" placeholder="Please enter text..."
onfocus="this.rows=3" ng-focus="isVisible = !isVisible" onblur="this.rows=1"
ng-blur="isVisible = !isVisible"></textarea>
As you can see from above I have to use two attributes, i.e. HTML onfocus to increase the rows and ng-focus to update isVisible (to show and hide the div). It works, but I was wondering if it's possible to increase and decrease the number of rows using ng-focus and ng-blur only.
Div layer I am showing and hiding
<div class="row" ng-show="isVisible" />
Thanks in advance
Basically you could use ng-attr-rows to set rows attribute value dynamically. You could have something like below.
Basically on each digest cycle ng-attr-* directive evaluate its expression, in your case * is rows, and add that evaluated value to rows attribute.
Markup
<textarea ng-model="test"
ng-attr-rows="{{row || '1'}}"
ng-focus="row=3"
ng-blur="row=1">
</textarea>
Demo Plunkr
Related
In this scenario the input field is limited to 5 Characters for the user to enter, once the user enters the 5 characters I append programatically a kind of description for the input to it (USER-Description).
Since the actual input will be the users input i want that to be limited to 5 but I should be able to programatically add a string of any length. When I do this currently the input field stays Red as if the required flag is on.
I think below points may help
You can add a empty box and maxLength Validation on (focus). and on (blur) remove the validation and apeend extra text.
or
you can do via css Trick, make a input group box. (input + div). (search input-group bootstrap for more info).
Have input a validation of 5 charter in input box and on focus and blur play with your append logic.
point 1 code will look something like this
<input type="text"
(focus)="firstName.maxLength = 5"
(blur)="appendString()"
name="firstName" [(ngModel)]="model.firstName" #firstName="ngModel" required />
Issue
Essentially, if I add items to a list, I do an ajax request to add them to an array in the backend and refresh the page.
And each item has two date entries, one for received and one for sent.
If I populate one of the dates, it will change it on the backend via another ajax request, and then fill in the value of that item.
The issue is that due to caching or something, it often happens that when one input date value is changed, it "duplicates" over to the other. I think this is a caching issue, as if I inspect the element, the one that was actually altered has a value="xxxx-xx-xx" whereas the cache-broken one has a value="".
Attempt at Resolution
I've already tried $("input").attr("autocomplete", "off"); // Disable input caching
Code/Images
Here's an image of the issue at hand https://imgur.com/PNNlRCK
When I inspect the element that I wanted to alter,
<input type="date" name="2020-08-12" id="sent" class="inp bg-dark border-0 text-center text-white" value="2020-08-12" autocomplete="off">
When I inspect the element of the one the cache is breaking,
<input type="date" name="" id="rcvd" class="inp bg-dark border-0 text-center text-white" value="" autocomplete="off">
Yet both visually display the same date. As you could imagine, this can really confuse users and lead them to try to resolve the issue themselves, potentially breaking more.
You might have used the duplicate selector when selecting the input to alter the value. I suggest each entry should be uniquely identified by an id (ex: UUID) and each input in each entry should have a name.
And then in the HTML, you use the data-id attribute to select the entry and the name attribute to select the desired input. Finally you can perform altering the input value.
$('.entry[data-id="7558c4eb-8c2c-499b-b5cc-ea4ca475b399"] input[name=sentDate]').val("2020-08-08");
Sidenote: use sent and rcvd id for 2 inputs in each entry is not good. Id attribute is meant to be unique to the whole html page.
Here's my demo code
What's the best/recommended way to indicate a form field will have a particular default value if you don't fill it out? I'm especially thinking about fields that are dynamic based on other fields, and wanting it to be correctly accessible.
Think a URL slug. When creating an account, if you fill the field out then that's fine. If you don't, a value will be generated based on your username. But it won't be the same as your username, just generated from it.
Actually setting the form field seems bad because it makes it less obvious you can change it yourself.
I'm not sure if placeholder text works here, but I assume not. I could do an aria-labelledby pointing to something that says "Default value: xyz" but I'm not sure if that will work, or how well it will be understood by screen readers - especially if it's changing automatically.
Cheers
The best way to do this is to populate the input and expose the fact that it was automatically filled in via the label as an extra bit of information.
Labels on inputs are read once you focus the related input.
For this reason we can generate labels "on the fly" to contain whatever we want.
As such the best option here would be to generate the label on blur of the first input that the second input depends on.
Within the label we add the instructions that explain why this input is already filled in.
We then auto populate the second input based on the input of the first.
In the below example I have appended "URL" to the first input value in order to simulate some sort of transformation from username to URL.
I also remove the explanation in parenthesis if the user has changed the second input value.
$('#iUsername, #iUserURL').on('blur', function(){
var ElUserName = $('#iUsername');
var ElUserURL = $('#iUserURL');
if(ElUserURL.val() == ""){
ElUserURL.val(ElUserName.val() + "URL");
$('label[for="iUserURL"]').text("user url (you can change this if you want, we have set it as " + $('#iUsername').val() + "URL)");
}else if(ElUserURL.val() != ElUserName.val() + "URL"){
$('label[for="iUserURL"]').text("user url");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="iUsername">User Name</label><br/>
<input id="iUsername" /><br/>
<hr/>
<label for="iUserURL">User URL</label><br/>
<input id="iUserURL" /><br/>
<hr/>
<label for="itest">I have added this third input just so you have something to tab too, it does not add anything to the fiddle</label><br/>
<input id="itest" />
I have access to form field in the administrative view.
Example
<label>Number:</label>
<input type="text" name="title" size="50"/><br/>
I do not have access to modify the html syntax, the only thing i can do is updating the form field with a value.
In the form field i want to update it with a number. I also want to have a link assigned to that number.
So when i click that number it directs us to the link.
Is there a way i can do that?
This method is tedious, but you could use the jQuery nth-selector to select the specific form element that you are dealing with.
http://api.jquery.com/nth-child-selector/
This method is risky, however, since you might add other form elements before it, altering the index of your target input element.
Afterwords, you could use the .val() jQuery method to change your input value.
Nonetheless, again, this method is not safe because the index of the form element could change. I would beg the powers of be to be able to add an ID or some identifying attribute to that form element.
There was a question previously on how to show hints in a text field (html form field), which clears automatically when the user clicks on the field under consideration. As in, when the field gets focus, the hint displayed inside the form gets cleared without the user having to manually delete the characters.
The solution given (and it works perfectly) -
<input onfocus="if (this.value=='search') this.value = ''" type="text" value="search">
Now my question is, how do you format the text that is displayed as the hint (in this case "search"). By formatting, i would want it to be in a certain color and font type.
I can do this to the other fields, which do not have this preloaded hint in it, by using css-
color:#123123; font-family:calibri;
Thanks!
You're asking about styling the content (value) of an input element.
You can use regular CSS for this:
input {
color:#123123;
font-family:Calibri;
}
Working example: http://jsfiddle.net/fxxp4/