Here’s probably what you looking for: <style type=”text/css”> textarea { background: url(http://i.stack.imgur.com/ynxjD.png) repeat-y; width: 600px; height: 300px; font: normal 14px verdana; line-height: 25px; padding: 2px 10px; border: solid 1px #ddd; } </style> <textarea> Textarea with style example Line 1 Line 2 Line 3 Line 4 Line 5 Line 6 Line 7 Line n </textarea> Or … Read more
Try this. var lines = $(‘textarea’).val().split(‘\n’); for(var i = 0;i < lines.length;i++){ //code here using lines[i] which will give you each line }
You can create a separate (invisible) element and fill it with textarea content from start to the cursor position. Textarea and the “clone” should have matching CSS (font properties, padding/margin/border and width). Then stack these elements on top of each other. Let me start with a working example, then walk through the code: http://jsfiddle.net/g7rBk/ Updated … Read more
I know this is a little bit late, but I have to say there is a way to use <div> with contenteditable attribute to simulate desired behaviour. .textareaElement { width: 300px; min-height: 17px; border: 1px solid #ccc; max-height: 150px; overflow-x: hidden; overflow-y: auto; } <div class=”textareaElement” contenteditable></div> Just set your min and max height, with … Read more
Before HTML5, we have an easy but workable way: Firstly set an maxlength attribute in the textarea element: <textarea maxlength=”250″ name=””></textarea> Then use JavaScript to limit user input: $(function() { $(“textarea[maxlength]”).bind(‘input propertychange’, function() { var maxLength = $(this).attr(‘maxlength’); if ($(this).val().length > maxLength) { $(this).val($(this).val().substring(0, maxLength)); } }) }); Make sure the bind both “input” and … Read more
No, there isn’t. IE has its TextRange objects to do the job. IE >= 9 and everything else for the last long time has selectionStart and selectionEnd properties on textareas and text inputs. This particular task isn’t too bad: the following will delete the current selection (if one exists), insert text at the caret and … Read more
Look at the comments on this site, with a count down. I have done it like this before, and it is simple and effective. Stack Overflow makes good use of color too. Perhaps you don’t have enough rep to see the comment box. It runs a little countdown while you type. At it approaches a threshold, … Read more
You would want to use selectionStart to do this. <textarea onkeyup=”getLineNumber(this, document.getElementById(‘lineNo’));” onmouseup=”this.onkeyup();”></textarea> <div id=”lineNo”></div> <script> function getLineNumber(textarea, indicator) { indicator.innerHTML = textarea.value.substr(0, textarea.selectionStart).split(“\n”).length; } </script> This works when you change the cursor position using the mouse as well.
Use a div with contentEditable attribute which acts like a textarea. That’s how wysiwyg editors are created. div { width: 300px; height: 200px; border: 1px solid #ccc; } <div contentEditable=”true”>Type here. You can insert images too <img src=”http://t2.gstatic.com/images?q=tbn:ANd9GcQCze-mfukcuvzKk7Ilj2zQ0CS6PbOkq7ZhRInnNd1Yz3TQzU4e&t=1″ /> </div>
The full solution is a bit more than what Sana had. It is documented as a bug over at the Android site ( http://code.google.com/p/android/issues/detail?id=7189 ): webView.requestFocus(View.FOCUS_DOWN); webView.setOnTouchListener(new View.OnTouchListener() { @Override public boolean onTouch(View v, MotionEvent event) { switch (event.getAction()) { case MotionEvent.ACTION_DOWN: case MotionEvent.ACTION_UP: if (!v.hasFocus()) { v.requestFocus(); } break; } return false; } });