Enable input selection but disable text entry - javascript

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.

Related

Barcode scanner auto-return feature

I'm attempting to build a very simple app that displays a webview to a site which contains a field to input product upc information. Only reason for the app is to provide our warehouse employees with a built in barcode scanner feature. All works well so far, up to inserting the scanned barcode information into the textfield with the following code:
webView.evaluateJavaScript("document.activeElement.value='\(text)'")
The problem I've run into is I am trying to code a way for the form to submit/search immediately following scan. As of now, the Search button does not even appear as using the value property does not seem to register as text input.
I have searched (perhaps incorrectly) for hours online for a similar issue and the only resolve I can think of is simulating keypresses with the textfield focused. At best, a simple keypress for the Enter key. However, with the search button not appearing until text is actually typed on the onscreen keyboard, I'm wondering if a combination of Space/Delete keys are needed, followed by the Enter key. So far, nothing has worked and I'd love some suggestions on what approach should be used here.
If submit is not visible it's probably due to a change event not firing, simulate the change event after filling a text value.
webView.evaluateJavaScript("document.activeElement.dispatchEvent(new Event('change', { 'bubbles': true }))")
after the change event we can target the button and fire the click event.
webView.evaluateJavaScript("var btn = document.querySelector('button')if(btn.textContent.includes('Search')){btn.click()}")
Add an event listener to the input and submit a form accordingly
const input = document.querySelector('input');
const log = document.getElementById('values');
input.addEventListener('input', updateValue);
function updateValue(e) {
log.textContent = e.target.value;
// code to search barcode
}
<input placeholder="Enter some text" name="name"/>
<p id="values"></p>

How to change Angularjs xeditable text/textarea behavior?

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/

How to remove trigger delay when calling ajax document?

Ok.
Question is simple.
I want to call some document via ajax when user changed the value of <input type="text">.
Not even just 'keyboard typing' event.
Include that way... you know, the tool tip...which showing last input result of user...
I mean, that tool tip... position is below the input box... showing user's recent typed results... you know that.. hard to explain. don't know its name...
Anyway, I wanna call ajax document right after user changed value of <input type="text">... Not even just keyboard typing, include via choosing one of that tooltips by mouse clicking...
Well, I was able to call document right after 'key typing event'..
This is the code :
sensitiveInput.addEventListener('keyup',function(){
callDocument_viaAjax();
}
So I tried similar method with above code.
This is the code :
document.addEventListener('mouseup',function(){
if(sensitiveInput.value !== '') {
sensitiveInput.onchange=function(){
callDocument_viaAjax();
}
}
});
But this code had some delay.. That means, Failed to realize the ui that I want to make.
When user changed the value of <input type="text" id="sensitiveInput"> via choosing one of the tooltips below input box, callDocument_viaAjax() wasn't executed.
I had to click on the document one more time to execute callDocument_viaAjax()....
I don't know why this happening.
And don't know how to solve this problem...
Please some one show me the mercy...
I solved this problem by using an event trigger 'input'.
'input' event detect change of input even if do not lose the focus from input field.
('change' effects only when input field loses focus)

Clearing a jQuery Form

I have been doing some research on a good way to clear a jQuery form.
I have a couple of ideas but I want to know if someone has a better way.
I know about using reset, but sometimes it is necessary to set a field back to a particular value that may not be accomplished by reset. (ie. if a form starts with some pre-filled data and you want to clear it)
I have read some discussion here: Resetting a multi-stage form with jQuery
But I have another idea that I will post as an answer. Please let me know what you think and if you have a better solution.
More Information:
For example I have an address form. It has a couple of inputs, selects, radios, etc. along with a copy into new button and a clear button. By default I want to have this particular radio selected to option 1.
<div id = "AddressList">
<div class = "Address">
<input type="radio"/> --obviously with some options here
<button>copy into new</button>
</div>
</div>
The user selected option two and clicks copy into new. So I say something like on the click of the click of the copy into new:
$("#addressList").append($(this).closest("#Address").html());
In the second address the secon radio button is selected. The user selects the third radio button. At this point clicking the reset button would reset the input back to option two not option one.
My solution would be to add the attribute called clear.
Then say $([clear]).val($(this).atrr('clear'))

this.select() and JavaScript events on forms

I have a form box that I want to be always selected. I was able to get it to select everything in the box when it is clicked (using onFocus="this.select()") but I want it to be selected 100% of the time. The text in the box will be always changing, so I tried using onChange="this.select()" but that didn't work. Here's what I have:
<form>
<input type="text" id="txt1" size="30" maxlength="1"
onkeyup="showHint(this.value)" onFocus="this.select()" onBlur="this.select()"
onChange="this.select()" value="Click here, then press a key"/>
</form>
Basically I just tried to call everything in hopes that something would work, but it is still acting as if only onFocus="this.select()" is there. By the way, this is for controlling something via keyboard, which is why the maxlength is only 1. I want it to be always selected so that when new key are pressed, the last command will be changed without having to use backspace.
Is there a reason you aren't just using document keystroke detection? If you need the value to appear in the input field for some reason, once you detect the keystroke, you could fill the text box. This would be much simpler than trying to maintain focus on the field itself.

Categories