I am working on a Blazor textarea input. What I want to achieve is whenever user types "#" character, I am going to popup a small window and they can select something from it. Whatever they select, I will insert that text into the textarea, right after where they typed the "#".
I got this HTML:
<textarea rows="10" class="form-control" id="CSTemplate" #bind="original" #oninput="(e => InputHandler(e.Value))" #onkeypress="#(e => KeyWasPressed(e))"></textarea>
And the codes are:
protected void InputHandler(object value)
{
original = value.ToString();
}
private void KeyWasPressed(KeyboardEventArgs args)
{
if (args.Key == "#")
{
showVariables = true;
}
}
protected void AddVariable(string v)
{
original += v + " ";
showVariables = false;
}
This worked very well. The showVariables boolean is how I control the pop-up window and AddVariable function is how I add the selected text back to the textarea.
However, there is one small problem. If I've already typed certain text and then I go back to any previous position and typed "#", menu will still pop-up no problem, but when user selects the text and the insert is of course only appended to the end of the text. I am having trouble trying to get the exact caret position of when the "#" was so I only append the text right after the "#", not to the end of the input.
Thanks a lot!
I did fast demo app, check it https://github.com/Lupusa87/BlazorDisplayMenuAtCaret
I got it - I was able to use JSInterop to obtain the cursor position $('#CSTemplate').prop("selectionStart") and save the value in a variable. Then use this value later in the AddVariable function.
you can set your condition in InputHandler and when you are checking for the # to see if it's inputed you can also get the length to see that if it's just an # or it has some characters before or after it obviously when the length is 1 and value is # it means there is just an # and if length is more than one then ...
Related
I am using Geb to write a script that will test a survey many times with random input to make sure nothing breaks. I would like to iterate through every input on a form and do different things depending on the input type.
For example:
while ($("form").find("input", j)) {
if($("form").find("input", j) == "checkbox"){
//check it sometimes
}
else if($("form").find("input", j) == "select"){
//select a random option
}
j++
}
I'm not exactly sure how the survey is going to work yet, so I would rather go down the page as a human would instead of doing all checkboxes first and then all selects etc. It is possible to check the type of input like my example?
Additionally, I notice I am repeating the $("form").find("input", j). Can I make that into a variable like in jQuery?
Simply collect all your inputs and selects in a navigator and iterate over all of them. Use is(String tagName) to detect select elements and #type attribute accessor to detect other element types:
def form = $("form")
def formElements = form.find("input") + form.find("select")
formElements.each { Navigator element ->
if (element.is("select") {
//select a random option
}
if (element.#type == "checkbox") {
//check it sometimes
}
}
My target is to dynamically fill a drop-down list. I have the password of 10 characters and I need to fill any combination of three words. I'm able to fill it use the message shown like Please fill 2,3 and 5 character, but this is depended on the String.
How should I do this thing dynamically in selenium so that the unfilled box are automatically identified and gives me the place where to fill.
I have implemented this code using String
int identifingPlacesToField =0;
String masterPassword ="jeffhrdyrt";
try {
Thread.sleep(5000);
Matcher m = Pattern.compile("\\d+").matcher(driver.findElement(By.id("pass_Login_form")).findElement(By.tagName("div")).getText().toString());
while(m.find())
{
identifingPlacesToField++;
Select select = new Select(driver.findElement(By.id("sel"+identifingPlacesToField)));
select.selectByValue(String.valueOf(masterPassword.charAt(Integer.parseInt(m.group(0))-1)));
}
driver.findElement(By.id("passBtnSubmit")).click();
TestingHLTestCases.checkingPortfolioPage();
} catch (InterruptedException e) {
e.printStackTrace();
}
In this Matcher is getting what are the digits and I am filling accordingly. But Now I want a similar thing without using string.
Thanks in Advance.
To solve this issue u have to do java coding.
Identify place to fill and use if else loop like
if(fieldfirst == 1)
{
Enter first word
}
else if(fieldfirst == 2)
{
Enter second word
}
continue this till u need it
Since Titanium doesn't allow you to manually change the hintText colour of a textfield, I have to set hintText manually. Because of this, I have to dynamically change the passwordMask setting on one of fields I'm using.
However, I'm getting weird behaviour and I can't tell if I'm doing something wrong, or if it's a bug in Titanium.
So, here's my markup:
<TextField id="password" onFocus="passwordFocusEvent" onReturn="passwordReturnEvent" onBlur="passwordBlurEvent" value="password"></TextField>
And some of my controller code:
function passwordFocusEvent(e) {
slideViewUp();
if (e.value === 'password') {
e.source.setPasswordMask(true);
e.source.value = '';
}
}
function passwordBlurEvent(e) {
if (!e.value) {
e.source.setPasswordMask(false);
e.source.value = 'password';
}
}
function passwordReturnEvent(e) {
slideViewDown();
passwordBlurEvent(e);
}
What happens is bizarre. When I focus on the password field, it remains plain text. I enter some text, then click off to another field, stays as plain text.
I click back to the password field, it's STILL plain text.
Now here's the weirdness. Up to this point, I would just assume it's not working. However, when I click off this second time, the passwordMask is set.
Major WTF.
I even tried targeting the field directly using $.password.passwordMask = true; but same thing.
Unfortunately, you cant do this. According to the docs on Ti.UI.TextField in the fine print;
Note: on iOS, passwordMask must be specified when this text field is created.
Its not all bad news though, there are a couple ways you can approach this, one option is to make the password mask yourself, by listening to the change event:
var theStoredPassword = '';
$.password.addEventListener('change', function(e) {
var newpass = e.source.value;
if(newpass.length < theStoredPassword.length) {
// Character deleted from end
theStoredPassword = theStoredPassword.substring(0, theStoredPassword.length-1);
} else {
// Character added to end
theStoredPassword += newpass.substring(newpass.length-1);
}
// Mask the text with unicode ● BLACK CIRCLE, 25CF
$.password.value = new Array(newpass.length + 1).join('●');
});
Another option, would be to have two text fields and swap them out whenever the user focuses the password field, the top one would have the custom hinttext, the bottom one would be passwordMasked. In fact thats probably way easier than what I just coded up. :-)
I have a fillable PDF file. I would like to require that a TextBox has a value when the user saves the PDF document i.e. the value is not blank.
Here is what I tried:
(1) Setting the "Required" field on the "TextBox".
PROBLEM: That didn't do much except color the textbox red.
(2) I tried to use the following code in the "onBlur" event:
f = getField(event.target.name)
if (f.value.length == 0)
{
f.setFocus()
//Optional Message - Comment out the next line to remove
app.alert("This field is required. Please enter a value.")
}
PROBLEM: If the user never clicks this box there is no problem
(3) I tried to use the "Validation" tab and run a custom JavaScript.
PROBLEM: If you don't click on the box there is no validation so it is perfectly happy to leave the textbox blank if the user forgets to fill it in
OK, I am out of ideas... Anyone?
Since you are using Acrobat JavaScript I assume you use a viewer that supports and executes Acrobat JavaScript. In this situation you can set the document's WillSave action to a custom JavaScript action and perform validation here. I'm not sure if you can cancel the save operation but at least you can display an alert if the validation fails.
UPDATE: This script will loop through all the fields and display and alert if the field value is empty.
for ( var i = 0; i < this.numFields; i++) {
var fieldName = this.getNthFieldName(i);
var field = this.getField(fieldName);
if (field.value.length == 0)
{
field.setFocus()
app.alert("Field " + fieldName + " is required. Please enter a value.")
}
}
Put the script in document's Will Save action and it will run every time the user saves the form. In Acrobat you set this in Tools > JavaScript > Set Document Actions and select Document Will Save.
I have a Dojo form that does not contain a submit button. Instead, I added an onkeypress handler to calls a method when Enter is pressed. The problem I am having is that when I hit enter before blurring off the current field, the _process method thinks that field is empty.
Or in other words: type in field1. hit tab. type in field2. hit enter. field2 is blank unless i click off the field or shift-tab back.
Any ideas?
dojo.connect(dijit.byId("fkrform"),"onKeyPress",function(e) {
if (e.keyCode == dojo.keys.ENTER) {
_process();
}
and the method it calls:
function _process()
{
var field1 = dijit.byId("field1").value;
var field2 = dijit.byId("field2").value;
alert(username);
alert(password);
...do stuff...
}
The fields are of dojoType: dijit.form.TextBox, and the form is: dijit.form.Form
Use dijit.byId('field1').get('value') instead of directly try to access the property "value". In your example you saved the value in the variable field1 and field2 and in the alert you use the variable username and password could be the answer why you don't get anything. But you still should use the get method to get a property instead of directly access the property.
When you press "Enter" your form will submit. So you need to connect to the "onSubmit" event on the form, instead of onkeyPress or onKeyUp.
The first example i created prints the value of the input box on every key someone pressed in the console.
http://jsfiddle.net/a8FHg/
But what you really wanted was hooking into the submit. I modified the example. The new example connects to "onSubmit" and creates an alert box with the text of the user input.
http://jsfiddle.net/a8FHg/1/
For completness if jsfiddle doesn't work some day. You JavaScript should looks like this.
dojo.ready(function(){
var form = dijit.byId('form');
var box = dijit.byId('box');
var submit = function(event) {
dojo.stopEvent(event);
alert("User input was " + box.get('value'));
};
dojo.connect(form, 'onSubmit', submit);
});
Assuming your form in your HTML has the id form and your box have the id box.