I'm trying to give the user ability to create customized list for my application,by insert his choices in text area field ,each line is treated as one choice using the \n (enter) as separator , i need to allow user to enter one choice in multiple lines,any one can help?
<textarea></textarea>
user enter : aa bb cc with enter in textarea, and then I'm processing them to split them at enter separator ,so i ha开发者_StackOverflow社区ve three option in list :1-aa ,2-bb,and 3-cc ,but what i need to make aa ,bb is the first option, and cc second option ,i need new separator, i need more ideas?
I think you're saying that you need the user to enter listable items in a textarea and need to support the ability to present a single option across multiple lines.
As you've seen, using a single newline as the item separator does not work - you can't differentiate between two items on one line each and a single item presented on two lines.
Use two newlines instead of one as the item separator.
Example input:
Item One Item Two line 1 Item Two line 2 Item Three
You can use whatever separator you like. For example an empty line (as when separating chapters), or a comma or semicolon. Any character (or sequence of characters) that is not part of the text to be entered.
Just remember to tell the user what to use as a separator.
This code will allow for the options to be entered on multiple lines and the options are created once you press Enter twice:
JavaScript
<script type="text/javascript">
var LastKeyCode=-1;
function updateOptions(e) {
if (e.keyCode) {
var KeyCode=e.keyCode;
} else {
var KeyCode=e.charCode;
}
if (KeyCode==13 && LastKeyCode==13) { // Enter?
var RowsDataAry=document.getElementById('inputfield').value.replace(/\r\n/g,"\n").split(/\n{2,}/g); // Fix IE CRs and split the textarea input
document.getElementById('choices').options.length=0; // Empty select
for (RowID in RowsDataAry) {
var TextVal=RowsDataAry[RowID].replace(/\n/g,", ").replace(/, $/,""); // Set commas and remove the last comma
document.getElementById('choices').options.length++;
document.getElementById('choices').options[RowID].value=RowID; // Add option value
document.getElementById('choices').options[RowID].text=TextVal;
; // Add option text
}
}
LastKeyCode=KeyCode;
}
</script>
HTML
<select id="choices" size="20"></select>
<textarea id="inputfield" onkeypress="updateOptions(event)" cols="40" rows="20"></textarea>
Tested in Firefox 3.6.3, Opera 10.53, IE 8 and Iron 5.0.380 .
精彩评论