I am trying to test if pressing the shift+enter keys will result in a newline. I've checked the docs and they do not have this combination listed there; will this combination ever be added in or is it already there and I just missed it?
It depends on your editor implementation. If your editor uses a contenteditable element inside, then according to the documentation it supports only the following combinations: 'ctrl+a', 'backspace', 'delete', 'left' and 'right' (only if text within the element is selected).
https://devexpress.github.io/testcafe/documentation/test-api/actions/press-key.html
However, it should work fine with the textarea element.
Related
I am in the process of writing a text editor. After looking at other text editors I have noticed that a number of them refer to a "soft" versus "hard" wrap. What is the difference? I can't seem to find the answer by searching.
A hard wrap inserts actual line breaks in the text at wrap points, with soft wrapping the actual text is still on the same line but looks like it's divided into several lines.
It's usual for text editors to auto-wrap text into paragraphs with hard newlines, but it's less common for the text to be re-flowed into a nice paragraph if you come back later and edit/add/remove words later on. (You can do this manually in emacs with M-q.)
This is rather annoying, since obsessive compulsive people like me then go back and have to manually re-insert the hard breaks at the appropriate points.
On the other hand, soft wrapping is annoying because most all command line tools use line-based diff-ing (version control is where this becomes most noticeable to me). If you've got a 1/3-page paragraph that's soft wrapped and fix a typo, it's basically impossible to see where the change is in a regular diff output or similar.
soft : The text in the textarea is not wrapped when submitted in a form. This is default
hard : The text in the textarea is wrapped (contains newlines) when submitted in a form. When "hard" is used, the cols attribute must be specified
Reference: W3Schools
I want to compare two TextArea's text ,and change the different text's line background color,but i don't know how can have tow background color in one TextArea. Maybe should custom to get it,what should i do?
or import .js to get it ? what should i do?
As a more advance solution, you can manipulate TextArea content with https://doc.qt.io/qt-5/qtextdocument.html QTextDocument. Original text document is available via this property https://doc.qt.io/qt-5/qml-qtquick-textedit.html#textDocument-prop . From this point, you can assign your own syntax highlighting. But it requires research from your side.
From the other side, you can check this example https://doc.qt.io/qt-5/qtwidgets-widgets-codeeditor-example.html and using this class https://doc.qt.io/qt-5/qsyntaxhighlighter.html you can assign the existing QTextDocument to QSyntaxHighlighter. The same, I guess, can be used for QML TextArea element.
Since TextArea has textDocument property it should be possible re-implement it for QtQuick Constrols.
To be honest I've never dealt with such a task, but this example looks pretty useful for such cases. Probably you should stick with rich text format option suggested in comments if you don't need advanced features (like real-time content changes).
I read very many questions and blogs about design select-option-list at IE explorer. None of them give me answer to the simple question:
Why IE view the select options in hiding the top input?
And if the selectedOption is not the first - the situation is worse: the optionList compose is higher then the input itself .
See the pictures:
The list hide the input:
The situation is worse when the selected item is not he first option:
And in chrome - All is OK:
This is the default behavior of select tag in IE10. On the basis of the option selected, the select list is rendered accordingly. You cannot control this directly but if you really want to, you can detect the overflow outside viewport and re-position the list accordingly. Another quick fix can be to use a javascript based select (plugins such as chosen) or you can even manually change the position of the selected option to first one if you want a hack-ish way of solving this.
i want to set the width of the html tag . And also apply css on the browse button which is provided in the input type file.
I referred the following -
Is there a way to set width of for showing in Firefox?
also referred following-
Setting uniform width in all browsers
but it is for specific browser. It should work on the mozila firefox , netscape navigator, google crome,safari etc. and i don't want to hide the original input control.
how to do this?
The short answer is that you can not really style the input file, and it's like this by design.
how ever, some tricks are available for you, for example:
http://www.quirksmode.org/dom/inputfile.html
You don't. It doesn't work that way.
You can specify the size of the element, but the browser chooses itself how to use that space to display the input field and the button. You can't style the intput field and the button separately.
It's not even specified in the standard that the file input should have an input box and a button. The browser can display the control any way it sees fit, and some browsers displays it differently, for example using a button and a text label.
I am creating a page in asp.net. I am trying to show some information in tabular format when user hovers on a inout button. To do this, I am setting alt attribute to input type button because it should be javascript independent. I tried creating a table and assigning it to the alt attribute as a text.
<input type="button" value="save" alt="<table><tr><td>some info </td></tr>
<tr><td>some other info </td></tr></table>"/>
But it is not displayed as a table with two ros. Instead it is displayed as a single line.
Is there any way to show it in tabular format?
This is not possible just like this. Alt can be just plain text.
You'll have to use JavaScript. Try to google for it :)
You'll have to:
Create table.
Using CSS, set it's position to absolute, near your control and display: none
On item hover, you have to set display: block.
Best for this kind of behavior is to use some Javascript framework, IE jquery
jquery.com
specially read these:
http://api.jquery.com/hover/
http://api.jquery.com/hide/
http://api.jquery.com/show/
Agreed with Ales, Javascript would make this a breeze. YUI's Tooltip allows you to instantiate a Tooltip associated with an element, or set of elements (changing the Tooltip's context, so in case you have many similar behaviours spread across a screen).
http://developer.yahoo.com/yui/examples/container/index.html
Once you have instantiated the Tooltip, its something like Tooltip.setBody("your HTML code");, though by default Tooltip sucks in title text of an <a> tag as its content, or possibly even alt text of an element - not 100% on the alt text default part though - good chance that if it doesn't do it by default, if you grab the alt attribute contents it will display it correctly inside the Tooltip.
Others have already told you that what you've asked for isn't possible, as HTML attributes must be plain text, not more HTML.
They've also told you that there are Javascript and JQuery libraries which will help you do what you're wanting to do. There are loads of scripts you could use, here's a link to one that you might want to try: http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/
However, I feel I should add one further point which others have missed, and which is actually quite important:
You're using the wrong attribute.
The alt attribute is not the correct attribute to use for a hover tooltip effect. You should be using the title attribute for this.
Using alt works this way for historic reasons in some browsers (I believe it works in IE, but not much else), but it is not intended as a tooltip. The correct use of alt is for a small bit of descriptive text that will appear if the image is not loaded. This could be because the file failed to load, or the user has images turned off, or the user has a text-to-speech browser, etc, but if the image is displayed, then this text should never be displayed.
The title attribute on the other hand is intended to be displayed, and all browsers implement it as a tooltip (in fact, it's not just on <img> tags; you can use title for any element).
Hope that helps.