TextArea + Tab key

2011.10.20. 08:29 stack

Előfordulhat, hogy egy TextArea-ban a Tab gomb lenyomásával azt szeretnénk, hogy ne a következő elemre ugorjunk, hanem az adott helyre szúrjunk be egy "\t" –t.
Legegyszerűbb, ha nem a TextArea-t módosítjuk, hanem egy plugin-nal egészítjük ki.

{
    xtype: 'textarea',
    plugins: ['tabKey']
}

A plugin léterhozása:

Ext.ComponentMgr.registerPlugin('tabKey', function () {
    var addTab = function (input) {
        // IE:
        if (document.selection && document.selection.createRange) {
            input.selection = document.selection.createRange();
            input.selection.text = "\t";
        // FF:
        } else if (typeof input.selectionStart === 'number') {
            var start = input.value.substring(0, input.selectionStart);
            var end = input.value.substring(input.selectionEnd);
            var newRange = input.selectionStart+ 1;
            var scrollPos = input.scrollTop;
            input.value = start + "\t" + end;
            input.setSelectionRange(newRange, newRange);
            input.scrollTop = scrollPos;
        }
    };
    return {
        init: function (field) {
            field.enableKeyEvents = true;
            field.on('keydown', function (field, e) {
                if (e.getKey() === e.TAB) {
                    addTab(field.el.dom);
                    e.stopEvent();
                }
            });
        }
    };
});

Végül még néhány CSS szabály, ami itt hasznos lehet.
Azonos szélességű betűtípus, illetve a tab mérete:

font-family: 'Courier New', Courier, FreeMono, monospace;

-moz-tab-size: 4;
-o-tab-size: 4;
-webkit-tab-size: 4;
tab-size: 4;

Példa itt: http://stack.hu/extjs/textarea_tab.php

2 komment

Címkék: plugin textarea tab key

A bejegyzés trackback címe:

https://extjs.blog.hu/api/trackback/id/tr633313647

Kommentek:

A hozzászólások a vonatkozó jogszabályok  értelmében felhasználói tartalomnak minősülnek, értük a szolgáltatás technikai  üzemeltetője semmilyen felelősséget nem vállal, azokat nem ellenőrzi. Kifogás esetén forduljon a blog szerkesztőjéhez. Részletek a  Felhasználási feltételekben és az adatvédelmi tájékoztatóban.

TeeCee :o) 2011.10.20. 08:36:10

A 'Példa itt:'-nél a működő példát kellene látni? Mert nálam Chrome alatt a tab-ra elveszti a fókuszt a textarea. (Nem tudtam ezalapján eldönteni, hogy a kód kimásolása miatt van a link, vagy demo-zni...)

stack 2011.10.20. 10:48:56

Na szép... bevallom, tényleg nem néztem Chrome alatt. :)

String.concat -ot Chrome nem ismeri, de a
start + "\t" + end;
még rövidebb is, mint a
String.concat(start, "\t", end);

Kösz, hogy szóltál! :)

ExtJS blog, mi ez?

Az ExtJS egy JavaScript keretrendszer, melyet a blog írója elfogultan a legjobbnak tart, és ez a blog olyan apróságok gyűjteménye, melyek ExtJS használata közben felmerültek, eszébe jutottak...

Címkék

ajax (4) alignto (1) állás (3) analytics (1) anchorto (1) android (4) animate (2) array (9) auto (1) back button (1) beautifier (1) beforeevent (1) benchmark (1) blur (1) budapest.js (1) button (1) canvas (1) capture (1) case sensitive (1) center (1) change (1) cikkajánló (1) class (2) closure compiler (1) collapse (1) combobox (3) comment (1) console.log (2) contextmenu (2) core (2) count (1) css (15) csv (1) dataview (1) date (4) datefield (3) datepicker (1) debug (1) doksi (1) dragdrop (1) easing (1) eclipse (1) editor (1) element (5) error (5) eval (2) event (1) fejtörő (1) field (2) fieldset (1) filter (1) firefox (4) firefox extension (2) focus (3) fonts (1) fun (1) function (1) google (2) google chrome (1) grayscale (1) grid (4) group contact (1) header (3) height (2) hidden (1) hirek (2) history (1) htaccess (1) html5 (2) htmleditor (2) https (1) icon (3) id (2) ie (2) ie6 (1) ie9 (1) iframe (3) image (2) indexof (1) javascript (1) jquery (2) jslint (2) jsmin (1) json (7) keymap (1) kipróbálom (2) könyvajánló (2) label (1) layout (1) lint (1) log (1) loop (1) magyar (2) mandelbrot (1) mask (1) math (1) maxlength (1) mistake (1) mysql (5) napi szívás (16) nem extjs (12) node (1) nth child (1) number (1) off (5) offline (1) operator (1) override (20) pagesize (1) paging (2) panel (2) php (7) picker (1) plugin (3) pozicionálás (2) preload (1) print (1) propertygrid (1) pseudo (3) readonly (2) record (1) regexp (1) replace (1) resizable (1) rotate (1) round (1) scale (1) sencha touch (2) server (1) shuffle (1) slider (1) sort (3) sortable (1) store (2) string (7) sum (1) tabchange (1) tabpanel (1) tab key (2) tdd (1) template (1) textarea (2) textfield (1) textitem (1) theme (2) throw (1) timer (1) timestamp (1) title (2) toggle (1) toolbar (6) tools (1) total count (1) transparent (1) tree (1) treenode (1) trigger (1) truncate (1) try (1) ucfirst (1) undefined (2) unique (1) unload (1) urlencode (1) utf8 (2) verzió (1) video (1) viewer (1) viewport (2) visible (2) vtype (1) window (2) xtype (1) zindex (2)

Extjs.blog.hu - RSS

Kérdés?

süti beállítások módosítása