How can i get the input field below to be rendered as follows
<input name= "NIALL" type="text" />
using the knockout model and html below. NOTE that I want to create the name of the element based on the knockout model. Heres what ive tried but it dosent work.
HTML
<input type="text" data-bind="value: stringValue,attr: { 'name': ElementName}" />
//Knockout model
function MyViewModel() {
var self = this;
self.stringValue = "sss";
self.ElementName = "NIALL";
}
The code is fine, it will work in IE's developer tools if you hit Refresh on the dev tools toolbar. Or look at it with firebuglite's bookmarklet from inside IE.
Related
On my project, I'm using PicoCSS as a default style.
I have a form on which I want to highlight the fields that have errors whenever there's some problem while sending it.
To do that, I want to conditionally render the aria-invalid tag, because if I set it to "false", it is highlighted in green, and the behavior I want is to show only the error validation.
The piece of code is similar to the following:
<script>
export let form: ActionData;
// here I have the property "form.errors.firstName", which will be populated if I have an error
</script>
<form>
<input name="first-name" />
<!-->how to populate HTML property aria-invalid only if form.errors.firstName is thruty? I don't want to populate it as "aria-invalid='false'"</!-->
</form>
Try this:
<script>
export let form: ActionData;
// here I have the property "form.errors.firstName", which will be populated if I have an error
</script>
<form>
<input name="first-name"
class="form-input"
aria-invalid="${form.errors.firstName ? 'true' : undefined}" />
</form>
Here, we are using the ternary operator to conditionally render the aria-invalid attribute. If form.errors.firstName is true, it sets the aria-invalid attribute to "true", otherwise, it sets it to undefined.
I just found that we can use this attribute to specify which case the letters should be entered in, but that doesn't work for me.
Example:
<input type="text" autocapitalize="words" name="subject" value="Website Feedback" />
I set this attr to words but still type with lover case each new word, so how it should work?
As many in the comments have pointed out, the attribute does not affect phisical keyboards. You can achieve this using javascript, by listening to the keyup event and capitalizing the text every time it changes. Here is a working example:
$(".autocapitalize").keyup(function () {
const originalValue = $(this).val();
const capitalizedValue = originalValue.replace(/(^\w{1})|(\s+\w{1})/g, letter => letter.toUpperCase());
$(this).val(capitalizedValue).focus()
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="autocapitalize" autocapitalize="words" name="subject" value="" />
It seems that some browsers do not take this attribute into account more "autocapitalize attribute doesn't affect behavior when typing on a physical keyboard".
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autocapitalize
Maybe you should use a function instead.
I need to have a Rich Text Area box to bind to knockout observable variable, I tried using Ckseditor control but the binding did not work even if I put a custom KO binding for CKSeditor. So I switched back to regular html textarea, then i can see the binding of the text, however it will show the text with html tags like this -
<p>This is the scope</p>
I would like to convert the textarea to a rich textarea control like cks or any other, anyone has any idea how to do it?
<script src="https://cdn.ckeditor.com/4.5.7/standard/ckeditor.js"></script>
<div class="form-group">
<label for="Scope">Scope</label>
<textarea rows="10" name="Scope" class="form-control input-sm" id="Scope" data-bind="value: Scope"></textarea>
</div>
Following is the Knockout observable variable code:
self.Scope = ko.observable("<p>This is the scope</p>");
In markup file, I didn't use the data-bind attribute to ckeditor textarea
CKEDITOR.replace('Scope1');
function GetFormatedTextFromDB(){
this.Scope1 = ko.observable($('#Scope1').val("<b>Murugesa Pandian test</b>"));
};
ko.applyBindings(new GetFormatedTextFromDB());
//pass your retrieved variable to val function
Output from script
<input type="text" name="search" id="search" style="border-style:ridge;" />
Thats the line of Html I'd like to have it as a html helper. I tried:
#Html.TextBox(" ", "",new { id="search", name="search", style="border-style:ridge;"})
but it won't post back for that text box when i press enter. It works fine for the input tag.
That would just be a regular box:
#Html.TextBox("search", null, new { style = "border-style: ridge;" })
Or assuming your model has a search property, it would be:
#Html.TextBoxFor(x => x.search, new { style = "border-style: ridge;" })
Both of these produce the same HTML. Unless there's any funny stuff going on, both the id and name of the textbox will be search.
I have several <input> fields within a <form>. Angular takes the value from those fields regardless of the <form> (which is actually there only for Bootstrap to apply the right styles to inner fields).
Now, I want to be able to reset the fields, and so get Angular update the output associated to them as well. However, a regular <input type="reset"/> button is not working. It resets the values of all the <input> fields, but Angular is not refreshing the output that is based on the fields after it.
Is there any way to tell Angular to refresh the outputs based on the current state of the fields? Something like a ng-click="refresh()"?
Let's say you have your model called address. You have this HTML form.
<input [...] ng-model="address.name" />
<input [...] ng-model="address.street" />
<input [...] ng-model="address.postalCode" />
<input [...] ng-model="address.town" />
<input [...] ng-model="address.country" />
And you have this in your angular controller.
$scope.reset = function() {
$scope.defaultAddress = {};
$scope.resetAddress = function() {
$scope.address = angular.copy($scope.defaultAddress);
}
};
JSFiddle available here.
You should have your values tied to a model.
<input ng-model="myvalue">
Output: {{myvalue}}
$scope.refresh = function(){
delete $scope.myvalue;
}
JSFiddle: http://jsfiddle.net/V2LAv/
Also check out an example usage of $pristine here:
http://plnkr.co/edit/815Bml?p=preview