I use angularjs and xeditable in my application. I would like to change the behaviour of editable textarea and editable text to allow the validation when the user click outside.
It will be better with an example :
<span editable-textarea="item.label.text" e-rows="2" e-cols="80" buttons="no" onshow="onShow()" onhide="onClose()">{{item.label.text}}</span>
With this code, we can't see the buttons to validate and to cancel our choice. Moroever the enter key doesn't validate, so it's impossible for the user to validate his choice.
What I want to do is changing the behaviour of the enter key to validate the new text. And I want to add the possibility for the user to change text and when he click outsite the textarea, the new text will be save.
The problem is I have no idea of how to do that even after reading all the documentation of xeditable and I didn't find the solution on any forum.
Do you have an idea of how can I do that ?
Thank you in advance
You can add the blur attribute with submit value and couple it with onbeforesave attribute:
<span editable-textarea="item.label.text" e-rows="2" e-cols="80" buttons="no" onshow="onShow()" onhide="onClose()" blur="submit" onbeforesave="validate($data)">{{item.label.text}}</span>
Example Fiddle: http://jsfiddle.net/NfPcH/8269/
Related
I have included smartFilterBar:ControlConfiguration control in Smart Filter Bar. One of the controls has F4 value help. In this control, I can enter some text manually also. How can I disable entering the text and display value help dialog only on click of that filed. In short I want a feature similar to "valueHelpOnly" in Input field which disable manual entry of data.
Programatically you can do it in a following way:
myControl = this.getView().byId("smartFilterBar").getControlByKey("myControl")
myControl.setValueHelpOnly(true);
After that, clicking on selection field will automatically open the value help dialog.
In Vuetify.js, when using <v-combobox> when I click away, the value I had typed is added to the model.
How can I prevent this?
https://vuetifyjs.com/en/components/combobox
https://codepen.io/anon/pen/NVQBWz?&editable=true&editors=101
What's strange is that the JSFiddle in the example site works, but if I copy the HTML/JS exactly into my app I experience this.
You could reset the input value on blur
<v-combobox #blur="search = ''"
Is there a directive onblur for editable-form? I can't seem to find one. angular has this ngTouch but it only validates a single input. What I really want is to know if the user loses focus on the form itself.
my code is something like this [editable-form][1]
but when the user clicks on the different form the editable form will trigger the editableForm.$cancel() method.
http://jsfiddle.net/NfPcH/81/
I've got the solution, you only need to add the tag blur='cancel' on <form editable-form name="editableForm" onaftersave="saveUser()" blur="cancel">
I have following span that I am using as a text input.
<span ng-model="sampleText" style="width:100px; padding:20px, 100px;" class="TextBox"></span>
Reason why I am using span instead of "input" or "textarea" is so that I have one box which can keep adding rows as I hit enter. This is more elegant way than showing a big box of textarea.
But problem I am facing is how do i bind the text that has been entered to the ng-model.
Maybe using ng-init?
Please let me know how to bind the text that has been entered to the "sampleText"
Thanks
The ngModel directive itself doesn't do much. It provides a controller that is used by other directives, like input (yes, input is a directive). That means you have to write your own one.
But you are lucky, because the documentation for the ngModelController has an example that's almost identical to yours.
I'm wondering if there is a way to allow a form to be selected (clicked) but at the same time make the form unable to have text entered.
I've tried using readonly which gave me the functionality but the cursor it provides is the same as if I set disabled=true and it greys out the input field which is confusing for the user. Is there any alternatives?
<input class="notype" />
$('.notype').on('keydown', function(e){
e.preventDefault();
})
What you haven't told us is why. If it's because you want it to be copied to clipboard but not changed, the above won't let you do that, if so please elaborate.