I've got this input that is bound with a property:
// in the template
<input type="text" v-model="someProp">
// in the script
export default {
data() { return {
someProp: ''
}
}
The issue is that this input will be bound with a very long string (21k characters long). Upon copy/pasting the string into the input, the tab temporarily crashes in the following fashion:
Can't scroll
Text cursor stops blinking
Window freezes
Components that shouldn't be displayed appear
There seems to be some overprocessing when binding with large inputs. What can I change in my code to prevent the lag?
And, if possible: is the overprocessing because of Vue or the browser?
Apparently, some browsers optimize large text input only for textarea elements, but not for input. Doing the following change in my template prevented the tab from lagging:
// change this
<input type="text" v-model="someProp">
// to this
<textarea type="text" v-model="someProp"></textarea>
(with some additional styling, of course).
The issue seems to come from the browser and not from Vue, but that's all I can tell - additional input would be greatly appreciated!
Related
I am facing a problem that i am working on a pre-developed script and adding my custom input fields, and every thing is fine except that an input which contains default value doesn't show the value while it is set in value attribute,
<input id="complete_within" type="text" value="5" class="mr-text">
The value 5 is not showing and i think there is a script that cleans it for some reason.
Why do i think so?
Because the value displays if i called this field through AJAX, but once i add it directly to page, it doesn't.
Is there any way to stop any event applied for specific element or to know which script is doing this?
I have an input that uses the bootstrap color picker. The input happens to be in a scrollable modal, and when it's about under half of the screen on a mobile phone, the virtual keyboard will partially or fully cover the color selector. I've managed to fix this by making the input readonly, since the click event is still triggered and the selector still appears. However I'd still like to let power-users on desktops type their own hex colors if they wish.
Is there any reliable way to make an input readonly only on mobile devices, that allows dynamic loading(input will be loaded via jquery's .load() or .html() if POST)?
Note that I'm aware I can do this by using it as a component, I just want to know if it's possible or not for future reference as well, though I'd prefer the current input-only design. I was very suprised there was nothing on this on SO especially since people had my problem but with the date-picker.
Maybe you could use media-queries and some sort of click-through stuff.
Cool thing is, it prevents javascript as well.
Here you go:
document.getElementById('test1').addEventListener('click', function() {
alert('1');
});
document.getElementById('test2').addEventListener('click', function() {
alert('1');
});
input[type="text"] {
pointer-events: none;
}
<input type="text" value="It's just a test 1" id="test1" />
<input type="search" value="It's just a test 2" id="test2" />
For better understanding i added two javascript clicks and as you can see, the click doesn't work for the input with "pointer-event:none".
I'm trying to add auto focus to a form. I have it working in Chrome but cannot get it working in Firefox with the below code. I think the reason could potentially be that it needs to be just autofocus rather than autofocus="autofocus". Would I be correct in assuming this? If so is there some way I can add it? I'm using a framework called SilverStripe and don't have direct access to editing the input field as it's done dynamically so would need to do it via JavaScript most likely.
<input type="text" name="Search" class="form-control search-form" id="TemplateSearchForm_SearchForm_Search" placeholder="Search..." autofocus="autofocus">
Note I am initially hiding the input box and displaying on the click of an icon by adding a class:
jQuery('.search').click(function () {
if(jQuery('.search-btn').hasClass('fa-search')){
jQuery('.search-open').fadeIn(500);
} else {
jQuery('.search-open').fadeOut(500);
}
});
I couldn't find anything in the HTML specification to validate the autofocus behavior exhibited by Chrome. Here's an excerpt from the spec on this behavior.
From 4.10.19.7 Autofocusing a form control: the autofocus attribute:
When an element with the autofocus attribute specified is inserted into a document, user agents should run the following steps:
[...]
Note: This handles the automatic focusing during document load.
It doesn't mention anything about applying this behavior when the display state changes (as Chrome is apparently doing), only when the element is first inserted into the DOM. This actually appears to a be a bug in Chrome as Firefox is following the HTML spec.
Instead of using the autofocus attribute, you will have to trigger the focus through JavaScript.
You could use JavaScript to automatically focus into any elements with autofocus='yes'
$('[autofocus="yes"], [autofocus="autofocus"], [autofocus="true"]').focus();
This should, theoretically target any elements that have autofocus set to either true, yes, or autofocus and focus on them.
I have to do automated tests on a website and I want to use CasperJS to learn. For proprietary reasons I can not give too much code.
Here is the example of the input that I am trying to fill:
<input data-bind="value: firstname, valueUpdate: ['blur'], css: {valid:(firstname.isValid() )} " title="" class="valid" aria-required="true" id="firstname" name="firstname">
As you can see, this input is not of type text and has no value attribute. Therefore, I can not use the casper.fill() method. Furthermore, if I enter the web page scope using evaluate() and change the input value using document.querySelector, the change will not be permanent as of the events attached to the text change on the input will not be triggered.
Here is my code:
this.waitForSelector('#memberTitle', function then(){
var testname = 'thisIsNotPermanent';
this.evaluate(function(testname){
document.querySelector('#firstname').value = testname;
}, testname);
});
If I capture the screen right after, I will see my text written in the input box. However, if I wait 500ms and take another capture, the text is gone as, I suppose, the events are triggered or just cleaned because it actually failed to trigger correctly.
The events attached to the input are of Blur, Change and Keypress.
Using CasperJS, how could I go to the lowest level possible to mimic a user using his keyboard and fully use the website's functionalities already in place?
The whole point of those tests are to work with what is in place. The idea is to not have to manually go through the JavaScript of the web site.
That's exactly what the casper.sendKeys(selector, keys) function is for which will send native keypresses and (hopefully) trigger the events on that text element:
this.waitForSelector('#memberTitle', function then(){
var testname = 'thisIsNotPermanent';
this.sendKeys('#firstname', testname);
}).wait(20, function(){
this.capture('screenshot.png');
});
<input> elements without a type attribute default to Text type.
This answer is here to complete the question from another angle. As Artjom B. mentionned, the correct way to fill an input and to trigger its events is by using the sendKeys() function. However, if you ever have a case, like mine, where the events will not trigger or will take a certain amount of time, know that you can trigger those manually.
If you use the firefox inspector tool, you will see that your input or tag will have an event attached to it marked as ev. If you select it, you will have a breakdown of all the events, in order, that are triggered.
You can see that the jQuery click() event will be called. In casperjs, from the evaluate scope you can now do this :
this.evaluate(function(){
$(".discard-answer").click();
})
From there, you can chain jQuery events, like in my case where I had to .blur().change().click();
It is important to know if the event is jQuery or not.
Hope this helps.
Suppose this is my textbox:
<input type="text" placeholder="%" />
And a user is supposed to enter a percentage inside, but without the % sign, only the numbers (e.g. 67 in 67%). But I want them to still remember that this is a text box in which you insert a percentage.
So how can I move the placeholder along with the text, make it unable to be deleted, always after the text?
And I do remember seeing it somewhere too, unless I got my facts wrong.
A way to do this would be to have an additional element overlaying the input element and moving the overlayed element as the user types.
But, I think a better UX experience would be to have the element as an add-on appended to the input field, as show in twitter bootstrap. See the "extending form controls" settings:
http://twitter.github.com/bootstrap/base-css.html#forms
You could simulate an input and change the width of the real input using javascript. (The trick is to use some invisible element to catch the needed width)
Exemple using JQuery: http://jsfiddle.net/Vu7hN/
$input.on('change keypress paste focus textInput input', function(){
testWidth.text($input.val());
$input.width(testWidth.width());
});