I have a one line textfield. (input type='text')

I don't have a textarea.

This textfield allows the user to enter small strings in a simple DSL. To give you an idea they look like this:

• from milan to london
• from italy(rome,florence) to uk

I was thinking to replace this textfield with codemirror

my questions are:

• is using code mirror for one line textarea a good idea ?
• has anybody done this ?
• are there any other approaches to make a textfield more 'colourful' ?

Thanks,

I have a one line textfield. (input type='text')

I don't have a textarea.

This textfield allows the user to enter small strings in a simple DSL. To give you an idea they look like this:

• from milan to london
• from italy(rome,florence) to uk

I was thinking to replace this textfield with codemirror

my questions are:

• is using code mirror for one line textarea a good idea ?
• has anybody done this ?
• are there any other approaches to make a textfield more 'colourful' ?

Thanks,

• javascript
• codemirror

• Isn't CodeMirror an in-browser code editing tool? I don't see how your input field requires a code-editor ? What do you mean by 'colourful'? – Julian Krispel-Samsel Commented Oct 23, 2012 at 8:41
• @nimod: Syntax highlighting I presume. – Felix Kling Commented Oct 23, 2012 at 8:49
• You could use a textarea and set its height to one row. It seems to be an "ok" approach to me. It's certainly not bad and building something on your own is probably more difficult. You still have to create the language parser though, so that the right tokens are correctly highlighted. – Felix Kling Commented Oct 23, 2012 at 8:50
• Unless you're already using the editor on the page for something worth using it, I can't see why you wouldn't write a little script instead of having a fully blown code-editor ... @FelixKling how is that not bad? – Julian Krispel-Samsel Commented Oct 23, 2012 at 8:52
• 1 @nimrod: I would not call codemirror a "fully blown code-editor". All it does is actually syntax highlighting (in its core). Sure, if the language is not large, a custom solution might not be that difficult, but I believe making it work properly in all (most) possible circumstances (which includes proper styling) will require ore than a little script. One can always build a custom solution later on when running into performance issues. – Felix Kling Commented Oct 23, 2012 at 9:42

2 Answers 2

Well, there is a way to make a single-line editor using rich capabilities of CodeMirror. First, you'll have to add a full-featured CodeMirror object (use a textarea).

Assume you've got var cm = CodeMirror(...). (Use value: ""). Then do

cm.setSize(200, cm.defaultTextHeight() + 2 * 4);
// 200 is the preferable width of text field in pixels,
// 4 is default CM padding (which depends on the theme you're using)

// now disallow adding newlines in the following simple way
cm.on("beforeChange", function(instance, change) {
    var newtext = change.text.join("").replace(/\n/g, ""); // remove ALL \n !
    change.update(change.from, change.to, [newtext]);
    return true;
});

// and then hide ugly horizontal scrollbar
cm.on("change", function(instance, change) {
    $(".CodeMirror-hscrollbar").css('display', 'none');
    // (!) this code is using jQuery and the selector is quite imperfect if
    // you're using more than one CodeMirror on your page. you're free to
    // change it appealing to your page structure.
});

// the following line fixes a bug I've encountered in CodeMirror 3.1
$(".CodeMirror-scroll").css('overflow', 'hidden');
// jQuery again! be careful with selector or move this to .css file

This works just fine for me.

You could just run a regex on the field when somebody hits a key.

When the event happens you do a str.replace on the content of a contentEditable element which is about one line high kinda like this:

var r = /from\s+(\w+)\s+to\s+(\w+)/gi
s.replace(r, 'from <em>$1</em> to <em class="to">$2</em>');

for that kind of approach you wouldn't need a code-editor, and you could just style your tags with these classes...

simples