textarea | 易学教程

Can I make a textarea grow with text to a max height?

阅读更多关于 Can I make a textarea grow with text to a max height?

问题 I'm working on a project where I have data in divs that can be various sizes. When a user clicks on one of the divs, it needs to turn into an editable textarea. The width is constant, but I'd like the height to start as the height of the original div and then grow to a max height before adding a scrollbar. Is that possible? 回答1: You can use contenteditable and let the user input in a straight div , here's a demo: http://jsfiddle.net/gD5jy/ HTML <div contenteditable> type here... </div> CSS

JavaFX 2 TextArea: How to stop it from consuming [Enter] and [Tab]

阅读更多关于 JavaFX 2 TextArea: How to stop it from consuming [Enter] and [Tab]

I want to use a JavaFX TextArea as though it were exactly like a multi-line TextField. In other words, when I press [Tab] I want to cycle to the next control on the form and when I press [Enter] I want the Key.Event to go to the defaultButton control (rather than be consumed by the TextArea). The default behavior for TextArea is that [Tab] gets inserted into the TextArea and [Enter] inserts a new-line character. I know that I need to use EventFilters to get the behavior that I want, but I'm getting it all wrong. I don't want the TextArea to consume these events ... I just want it to let them

CSS to change the cursor style of the resize button on a textarea

阅读更多关于 CSS to change the cursor style of the resize button on a textarea

I noticed that the resize button on my text area when hovered and/or clicked is staying as an arrow. It seems to me like it should be a pointer. seeing as there is css to remove or add the resize tool to a textarea, resize:none; and css to change the cursor of the whole textarea, cursor:pointer; but it seems like there should be a css parameter to control the cursor of just the resize button. I've been looking around a bit and can't seem to find the property though. I can think of a few ways to do this in javascript or jquery but seems like overkill. So is there a way to set the cursor for

How to get cursor position or location from RichTextArea in GWT?

阅读更多关于 How to get cursor position or location from RichTextArea in GWT?

I want to get cursor position or the location from RichTextArea. I do not know how to get current cursor position Without any mouse event. e.g. TextArea has method getCursorPos(), but RichTextArea does not have method like TextArea. Anyone have any idea? Please help me... Thanks in advance... Andrei Volgin If you you want to insert something in the RichTextArea at the cursor position, you can do it with the formatter: RichTextArea.Formatter formatter = richText.getFormatter(); formatter.insertHTML("My text is inserted at the cursor position"); To find a cursor position using JavaScript, try

javascript | save textarea value with line breaks

阅读更多关于 javascript | save textarea value with line breaks

I have a code where it saves multiple textarea values in a text file. However, it does not display the line breaks I indicated after saving it. It only identifies the line breaks w/c are manually put within the textarea. Below is the code. Please help. <script> var TestVar = new Array(); var i = 0; function save() { TestVar[i] = document.getElementById("text1").value + "\n" + document.getElementById("text2").value; mydoc = document.open(); mydoc.write(TestVar); mydoc.execCommand("saveAs",true,"TicketID.txt"); mydoc.close(); } </script> </head> <body> <form id=formtest> <textarea name="textarea

display line breaks asp.net mvc razor

阅读更多关于 display line breaks asp.net mvc razor

I'm using the following to make the text output the line breaks entered in a <textarea> HTML element. MvcHtmlString.Create(Model.Post.Description.Replace(Environment.NewLine, "<br />")) Is there a nicer way to do this? Your code is vulnerable to XSS attacks as it doesn't HTML encode the text. I would recommend you the following: var result = string.Join( "<br/>", Model.Post.Description .Split(new[] { Environment.NewLine }, StringSplitOptions.None) .Select(x => HttpUtility.HtmlEncode(x)) ); return MvcHtmlString.Create(result); and then in your view you can safely: @Html.SomeHelper() There's an

Remove all stylings (border, glow) from textarea

阅读更多关于 Remove all stylings (border, glow) from textarea

问题 I want to remove the stylings from a textarea and leave it all white without any border or glow, if possible. I've tried with different stuff found here on SO, but nothing works (tried with FF and Chrome). So, is it possible and if so how to do it? What I've tried so far: textarea#story { // other stuff -moz-appearance:none; outline:0px none transparent; } textarea:focus, input:focus{ outline: 0; } *:focus { outline: 0; } 回答1: The glow effect is most-likely controlled by box-shadow. In

How to clear text area with a button in html using javascript?

阅读更多关于 How to clear text area with a button in html using javascript?

I have button in html <input type="button" value="Clear"> <textarea id='output' rows=20 cols=90></textarea> If I have an external javascript (.js) function, what should I write? Change in your html with adding the function on the button click <input type="button" value="Clear" onclick="javascript:eraseText();"> <textarea id='output' rows=20 cols=90></textarea> Try this in your js file: function eraseText() { document.getElementById("output").value = ""; } You need to attach a click event handler and clear the contents of the textarea from that handler. HTML <input type="button" value="Clear"

How to validate pattern matching in textarea?

阅读更多关于 How to validate pattern matching in textarea?

When I use textarea.checkValidity() or textarea.validity.valid in javascript with an invalid value both of those always return true, what am I doing wrong? <textarea name="test" pattern="[a-z]{1,30}(,[a-z]{1,30})*" id="test"></textarea> jQuery('#test').on('keyup', function() { jQuery(this).parent().append('<p>' + this.checkValidity() + ' ' + this.validity.patternMismatch + '</p>'); }); http://jsfiddle.net/Riesling/jbtRU/9/ Dipesh Shah HTML5 <textarea> element does not support the pattern attribute. See the MDN doc for allowed <textarea> attributes. You may need to define this functionality

div resizable like text-area

阅读更多关于 div resizable like text-area

Browsers allow text-areas to be re-sized by dragging their corner by default. I was wondering if this rule could be applied to other elements (a div for instance). I know this effect could be achieved using the jQuery draggable or the jQuery-ui resizable function, but I would like to do it with plain html / css if it is possible to avoid relying on that library. Are their any CSS rules that I could apply to a div to make it behave in this way? If you have any other solution I would like to hear it. sachleen Use the css3 resize property. div { resize: both; } There is also a resize: horizontal