Ограничьте Текстовую область для того, чтобы не принимать 250 символов
Я исправил некоторые ошибки в ответе Г. Родригеса. Я добавляю событие 'field' и 'finish' для Busboy и делаю next () в событии 'finish'. Это работа для меня. Как следует:
module.exports = (path, app) => {
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({ extended: true }))
app.use((req, res, next) => {
if(req.rawBody === undefined && req.method === 'POST' && req.headers['content-type'].startsWith('multipart/form-data')){
getRawBody(req, {
length: req.headers['content-length'],
limit: '10mb',
encoding: contentType.parse(req).parameters.charset
}, function(err, string){
if (err) return next(err)
req.rawBody = string
next()
})
} else {
next()
}
})
app.use((req, res, next) => {
if (req.method === 'POST' && req.headers['content-type'].startsWith('multipart/form-data')) {
const busboy = new Busboy({ headers: req.headers })
let fileBuffer = new Buffer('')
req.files = {
file: []
}
busboy.on('file', (fieldname, file, filename, encoding, mimetype) => {
file.on('data', (data) => {
fileBuffer = Buffer.concat([fileBuffer, data])
})
file.on('end', () => {
const file_object = {
fieldname,
'originalname': filename,
encoding,
mimetype,
buffer: fileBuffer
}
req.files.file.push(file_object)
})
})
busboy.on('field', function(fieldname, val, fieldnameTruncated, valTruncated) {
console.log('Field [' + fieldname + ']: value: ' + inspect(val));
});
busboy.on('finish', function() {
next()
});
busboy.end(req.rawBody)
req.pipe(busboy);
} else {
next()
}
})}
6 ответов
Вы должны связать функции для событий
onpaste, onkeyup и onfocus области, для которой вы хотите выполнить это действие.
Для текстового поля asp, я думаю, вам нужно учитывать только событие OnTextChanged.
Для текстового поля
<INPUT id="counterMessage" readOnly size="3" value="250" name="counterMessage">
<TEXTAREA onpaste="PasteCounter(this.form.txtAreaMessage,this.form.counterMessage,250);"
id="txtAreaMessage" onkeyup="textCounter(this.form.txtAreaMessage,this.form.counterMessage,250);"
style="BORDER-RIGHT: 0px; BORDER-TOP: 0px; OVERFLOW: hidden; BORDER-LEFT: 0px; WIDTH: 99%; BORDER-BOTTOM: 0px; HEIGHT: 95px; TEXT-ALIGN: justify"
onfocus="textCounter(this.form.txtAreaMessage,this.form.counterMessage,250);" name="txtAreaMessage"
rows="3" runat="server"></TEXTAREA>
function PasteCounter(field, countfield, maxlimit)
{
var len;
var txt = clipboardData.getData("Text");
txt = field.value + txt
len = parseInt(txt.length);
if ( len > maxlimit )
{
event.returnValue=false;
txt = txt.substring(0, maxlimit);
field.value = txt;
alert("Only " + maxlimit + " characters are allowed");
}
countfield.value = maxlimit - txt.length;
}
function textCounter(field, countfield, maxlimit)
{
if (field.value.length > maxlimit )
{
field.value = field.value.substring(0, maxlimit );
alert("Only " + maxlimit + " characters are allowed");
}
countfield.value = maxlimit - field.value.length;
}
Текстовое поле countfield предназначено для отображения оставшихся символов.
Вы также можете сделать это с помощью валидатора ASP.NET:
<asp:TextBox ID="MyTextBox" runat="server" TextMode="MultiLine" Rows="4" />
<asp:RegularExpressionValidator Display="Dynamic" ID="RegularExpressionValidator1" ControlToValidate="MyTextBox" Text="<p>A maxiumum of 250 characters is allowed.</p>" runat="server" ValidationExpression="^(.|\s){0,250}$" />
1) Очень простой способ справиться с этим - начать с события onChange:
<textarea id="yourTextArea" onchange="this.value.length = Math.min(this.value.length, 250)"></textarea>
Главный недостаток здесь в том, что текстовое поле не будет обновляться, пока фокус не покинет текстовое поле.
2) Вы должны иметь возможность адаптировать приведенный выше пример к функции проверки формы, которая запускается в событии формы onSubmit.
<script type="text/javascript">
document.forms[0].onsubmit = function() { document.getElementById("yourTextArea").value.length = Math.min(this.value.length, 250); }
</script>
3) Если вы хотите выполнить эту проверку на стороне сервера, вам действительно нужно просто получить textarea и усеките его.
string validText = yourTextArea.Value.Substring(0, 250);
Для интерактивной обратной связи вы должны сделать вышеуказанное в javascript, поскольку проводные элементы управления не будут реагировать, пока они не будут отправлены обратно на сервер (требуя перезагрузки страницы). Это может вызвать небольшую нагрузку на сервер, если вы обновляете количество символов при каждом нажатии клавиши.
Ниже представлена приблизительная реализация js, которая просто подсчитывает количество символов ASCII при каждом изменении. Это также будет работать, если текстовое поле изменено из-за вырезания и вставки:
<script type="text/javascript">
function countWords() {
var text = document.getElementById("txtBox1").value;
if (text.length > 250) text = text.substr(0,250);
document.getElementById("txtBox1").value = text;
}
</script>
<textarea id="txtBox1" onkeyup="countWords();" >text here</textarea>
<asp:TextBox
onkeypress="return value.length<=10;"
onpaste="return (value.length+clipboardData.getData('Text').length)<=10"
TextMode="MultiLine"
runat="server"
/>
Вы можете использовать jQuery для одновременной привязки к нескольким событиям
$("#txtQuestions").bind("keyup change blur input paste", function() {
// fire this off a few ms after the event happens
setTimeout(
(function(el){ // closure to store "this" as "el"
return function() { if (el.value.length>250) el.value.length = 250; }
})(this), 10);
});
Существует библиотека (jQuery.charcounter) , которая автоматически добавит оставшиеся символы и то, что не в DOM.