Dynamic spell-checker for HTML text box? - javascript

I have a text box, created in HTML. The user may type input into this text box. I would like to validate their input dynamically, as they type, and search for spelling mistakes in their text. If there is a spelling mistake, underline the word.
This is a common functionality I assume, but I cannot find a plugin or API call that will accomplish this for me. Can anyone please point me in the right direction? Preferably something that will work in Spanish rather than English :).
Thanks you.

There are tree options for spellchecking :
Using a jQuery plugin
Using the build-in spell checker of your browser with the spellcheckattribute
Using a spell checker in a WYSIWYG editor

Related

How to select text using cypress [cypress]

I'm looking to test a text editor like https://github.com/brijeshb42/medium-draft using Cypress. But I can't find a way to select text using it. Does anyone have a clue on how to do that?
I'd have to select a specific text range in order for the test to be effective.
The commented answer above was the clue I needed, but it needs a couple tweaks (at least as of the version I'm using: v3.1.5). The link has all the info, but the answer should be as follows
cy.type('{selectall}')
Note that it's ".type()" instead of ".text()" and the escape sequence is quoted...

How to create an input field where you can type naturally, and then it translates it into HTML?

I'm trying to have a textarea input field just like when you post a new StackOverflow question. You can have line spaces, you can bold text, you can insert link etc.
However, when you push some kind of button, all of that gets translated into a long HTML string (e.g., spaces become <p> or <br>, bold becomes <strong>, link becomes <a>). Is there a way to do this with some kind of JS plug in?
What you describe is a What You See Is What You Get (WYSIWYG) editor.
Google "WYSIWYG editor library"
Examples:
https://prosemirror.net/
https://www.tinymce.com/
This question has been answered here Rendering HTML inside textarea
What you need is WYSIWYG (What you see is what you get) editor.
There are a lot of them.
You can check out these:
Ckeditor The best web editor for everyone
TinyMCE Full featured web editing
They are very easy to use.
If I have understood what you are asking, you will need to learn regular expressions. Everything is the context is based on text replacement.
Example: because textarea does not display hyperlinks, buttons, i can do somethings like in stackoverflow.
For hyperlink, i can write something link [# http://facebook.com] or [link]http://facebook.com [link];
later, I extract the http://facebook.com and wrap it between <a></a> elements.
What everybody above said is true, you want to be looking at a WISYWG editor.
If by chance you are using Bootstrap, you may want to look at Summernote.
I have no affiliation with them, but I used it for one of my projects and was very pleased.

Suggested values from the database

i want to suggested text values when user can type the letter in particular text box for example i will type a in my text box it will be retrieve all a value from the database and it suggested (eg: i type "a" means Air, apple, append like that) in mvc 2
You have not posted any code that you tried but if you want from scratch then have a look at following
This Jquery plugin might help you http://jqueryui.com/autocomplete/. On clicking View Source you can get all the code.
You can also have a look at this code http://www.devbridge.com/projects/autocomplete/jquery/
i think this might help. You type in a name and it brings up suggestions from a database.
http://www.w3schools.com/ajax/ajax_aspphp.asp
hope this is what you are looking for

Spell check in text editor

I am new to JavaScript. Can anybody tell me how to create simple text editor with spell check using html JavaScript?
if anybody has code please send me.
The easiest solution is to use an existing texteditor with spellchecker like ckEditor.
Here's the easy way to do it without javascript: inline-disabling-of-firefox-spellcheck
And here are some good existing spell checkers: free-spell-checkers-for-html-forms

Javascript - Change font color of certain text in textarea

Is there any JS function that can change the color of certain text in a textarea?
For example, blar blar {blar} blar, {blar}, including { }, will be in blue. Other words will be in blank. In other words, all I need is a function that can change color of all text in { }.
I've done some studies and it seems that most people say it can't be done. But I'm seeing rich text editors or those wysiwyg editors having the ability to bold or underline words. There must be a way to do it.
Any suggestion is welcome.
No one mentioned contentEditable?
Just make a contentEditable div and use javascript to style it.
I reccommend you to look into the Dojo Toolkit's.
It has a Editor widget.
Other resources:
Some contentEditable problems in IE.
How to use contentEditable with jQuery or without it.
wysiwig-editors are using iframes instead of textareas. Textareas are very little customizable, since what you're after is changing part of the content. You can't add tags inside a textarea, which makes it impossible to only change part of the text.
If you look at the editor here in SO, you write normal text inside a textarea, and it is then transformed in the box below it, so you'll see the asterix inside the textbox, but in the box below, it'll transform special characters by regexing them with tags.
If you're using firebug, you can start writing inside the editor, while looking at the HTML in the preview-box.
you can't use a textarea to do that, per se.
But, javascript is your friend. Perhaps you should take a look at the code of a few rich text editors.
You could start with lwrte, since it says its "lightweight". Also, its written in jquery so it will be pretty easy to undertand. (and I'm a jquery fanboy).
Hope that helps,
jrh
I Think You will need to use execCommand method of javascript it controls many thing such this stuff of changing specifc textcolor
Regards
But some Jquery WYSIWYG editors do this ! How is that possible ? See this editor lwrte

Categories

Resources