Ich würde gerne die Anzahl der Zeichen in einen Textfeld ausgeben.
Dazu habe ich dieses kleine Script.
Allerdings wird nur der Wert "0 " angezeigt.
[{ $oView->oxdescription->value|count_characters:true }]
Hat das jemand schon mal implementiert?
Öhhmmm. Bin doch selber drauf gekommen.
Hier die Lösung:
[{ $oView->getEntryMetaData(“oxdescription”)|count_characters:true}]
Danke für das Posten der Lösung!
Bitte sehr. Aber nicht so voreilig.
Wie bekomme ich das hin, dass die Anzahl der Zeichen während der Eingabe angezeigt werden?
Diese Lösung zeigt die Anzahl erst nach dem speichern an.
Mit Smarty wirst Du das nicht hinbekommen, dazu brauchst Du was mit JavaScript. Aber an der Stelle bin ich dann völlig raus ^^
$('#myTextArea').on('keyup', function(){
var hola = $(this).val().length;
console.log(hola);
});
Grüße
Rafig
Bekomme das irgendwie nicht hin. Sicher das der Code funktioniert?
[QUOTE=Medicus;177702]Sicher das der Code funktioniert?[/QUOTE]
Ja, ziemlich sicher. Vorhin hatte ich zwar nicht getestet aber hier.
[B]Buchstaben zählen[/B]
Tippe dort ein paar Buchstaben in die textarea rein.
Du kannst keyup, keydown usw. nutzen. Das keyup war nur ein beispiel von mir.
Grüße
Rafig
Mal ganz ehrlich, ich weiß mit deinen Code nichts anzufangen.
Was macht er denn nun?
Wie auf deiner Seite ein Popup? Ersetzt der meinen Code? Oder erweitert er diesen?
Wie wird der aufgerufen? Wo kommt der hin? Was wird bei #myTextArea eingegeben? Ist die Raute wichtig?
Hallo Medicus,
-
zu erstmal sollte man sich höflichkeitshalber mal dafür bedanken das man hier versucht dir zu helfen.
-
Hier ist auch ein bisschen Eigeninitiative gefragt. Versuche dich mit der JavaScript und jQuery Grundlagen vertraut zu machen. Ich kann und will dir hier keinen Crashkurs in Sachen JavaScript geben, Google ist dein Freund.
-
Das ist kein Popup, sondern alert. Ich habe die Ausgabe von alert jetzt geändert, schaue dir [B]das[/B]mal an.
[B]JavaScript:[/B]
$('textarea.areabox').on('keyup onchange', function(){
var hola = $(this).val().length;
var myP = $('.cnt');
$(myP).text(hola);
});
[B]CSS:[/B]
.cnt {
width:80px;
height:80px;
border-radius:50%;
font-size:26px;
color:#fff;
line-height:80px;
text-align:center;
background:#000;
float: right;
position: relative;
}
[B]HTML: [/B]
<span class="cnt">0</span>
<textarea rows="15" cols="70" class="areabox"></textarea>
Grüße
Rafig
Man muss sich nicht für alles bedanken und ein Nichtcoder wird nachfragen dürfen, was der Code macht und [B]ist[/B]. Einfach mal eine Info zu dem, was man einsetzt, würde es für viele leichter machen.
@medicus-Schau mal hier: http://jsfiddle.net/timur/47a7A/
Hallo OXID-Design
Wenn ich dich mit meiner Kolonne von Fragen verärgert haben sollte, tut mir das leid.Das war nicht meine Absicht.
Natürlich habe ich auch Eigeninitiative. Aber der Informationsgehalt war für mein Grundwissen einfach nicht erfassbar. Ich habe auf Grundlage deines Codes aber im Netz gesucht (muß ja nicht Gokkel sein 
)
Ich wusste z.B. nicht das der Code ein Javascript war.
Ich im Netz ein Javascript gefunden was ich angepasst habe.
Allerdings habe ich das seltsame Verhalten das im SEO Bereich die Hilfe Aufrufe nicht mehr funktionieren.
Hier ist der Code mit Beschreibung:
[{*Source: OXID_ESHOP_CE_4.9.6\application\views\admin pl\object.seo.tpl*}]
[{* Ab hier Kommplett ersetzen ab Zeile 113 bis 121 *}]
<div class="r1"><tr>
<td class="edittext" valign="top">
[{ oxmultilang ident="GENERAL_SEO_OXDESCRIPTION" }]
<br><br><label><span class="counter">[{ $oView->getEntryMetaData("oxdescription")|count_characters:true}]</span> Zeichen eingegeben.</label></td>
<td class="edittext">
<textarea id="textArea" type="text" class="editinput character-limit" style="width: 100%; height: 48px" maxlength="156" name="aSeoData[oxdescription]" [{ $readonly }]>[{$oView->getEntryMetaData("oxdescription")}]</textarea>
[{ oxinputhelp ident="HELP_GENERAL_SEO_OXDESCRIPTION" }]
</td>
</tr>
</div>
[{* Javascript von: https://blog.kulturbanause.de/2015/06/anzahl-der-geschriebenen-zeichen-mit-jquery-zaehlen/#more-14220 *}]
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(document).ready(function($){
$('.character-limit').keyup(function(){
var limit = 156; // Maximale Anzahl an Zeichen
var count = $(this).val().length;
$('.counter').html(count);
if (count > limit) {
$(this).css('background','red');
} else {
$(this).css('background','limegreen');
}
});
});
</script>
So, nun gut ist. Wir wollen schaffen nicht flennen.
[QUOTE=Medicus;177714]Allerdings habe ich das seltsame Verhalten das im SEO Bereich die Hilfe Aufrufe nicht mehr funktionieren.[/QUOTE]
Wo ist das? kann ich das mal sehen? URL?
Grüße
Rafig
Im Backend meines Testshops. 
Füg den meinen Code doch einfach mal in deine object.seo.tpl ein.
[QUOTE=Medicus;177716]Im Backend meines Testshops.
Füg den meinen Code doch einfach mal in deine object.seo.tpl ein.[/QUOTE]
Schaue einfach mit F12 auf die Browser Console ob irgendwelcher JavaScript Fehler ausgegeben werden, ich vermute schon.
Grüße
Rafig
Entferne
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
und füge den Code unter die Zeile der Oxid-Einbindung von jquery. Sollte laufen.
@OXID-Design
Das zeigt mir keine Fehler an.
@adamweber
Habe ich gemacht. Der Unterschied ist jetzt, das die Hilfe global nicht mehr aufrufbar ist.
Es beinträchtigt die Funktion des Moduls nicht und weitere Effekte im Admin sind mir noch nicht aufgefallen.
Vielleicht ein unentdeckter Bug?
Doch kein Bug. Nur die jquery.min.js von Oxid ist veraltet. Eigentlich alles was darauf aufbaut.
Ich habe gerade mal ein paar Versionen duchgetestet.
Normalerweise macht man daraus ein Modul, ersetzt nur den Block und bindet das Skript vernünftig ein. Ersetze die headitem.tpl komplett mit folgendem Text und entferne das Skript aus object_seo.tpl. Geht
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>[{ $title }]</title>
<meta http-equiv="Content-Type" content="text/html; charset=[{$charset}]">
[{if isset($meta_refresh_sec,$meta_refresh_url) }]
<meta http-equiv=Refresh content="[{$meta_refresh_sec}];URL=[{$meta_refresh_url|replace:"&":"&"}]">
[{/if}]
<link rel="shortcut icon" href="[{ $oViewConf->getBaseDir() }]favicon.ico">
[{block name="admin_headitem_inccss"}]
<link rel="stylesheet" href="[{$oViewConf->getResourceUrl()}]main.css">
<link rel="stylesheet" href="[{$oViewConf->getResourceUrl()}]colors.css">
<link rel="stylesheet" type="text/css" href="[{$oViewConf->getResourceUrl()}]yui/build/assets/skins/sam/container.css">
[{/block}]
[{block name="admin_headitem_incjs"}]
<script type="text/javascript" src="[{$oViewConf->getResourceUrl()}]yui/build/utilities/utilities.js"></script>
<script type="text/javascript" src="[{$oViewConf->getResourceUrl()}]yui/build/container/container-min.js"></script>
<script type="text/javascript" src="[{$oViewConf->getResourceUrl()}]yui/oxid-help.js"></script>
[{/block}]
[{block name="admin_headitem_js"}]
<script type="text/javascript">
<!--
// standard messages
var sUnassignMessage = "[{ oxmultilang ident='GENERAL_YOUWANTTOUNASSIGN' }]";
var sDeleteMessage = "[{ oxmultilang ident='GENERAL_YOUWANTTODELETE' }]";;
// class info
var sDefClass = '[{ $default_edit }]';
var sActClass = '[{$actlocation}]';
[{ if $updatelist == 1}]
window.onload = function ()
{
top.oxid.admin.updateList('[{ $oxid }]');
}
[{ /if}]
var ajaxpopup = null;
function showDialog( sParams )
{
ajaxpopup = window.open('[{ $oViewConf->getSelfLink()|replace:"&":"&" }]'+sParams, 'ajaxpopup', 'width=800,height=680,scrollbars=yes,resizable=yes');
}
function focusPopup()
{
if ( ajaxpopup )ajaxpopup.focus();
}
window.onclick = focusPopup;
function cleanupLongDesc( sValue )
{
if ( sValue == '<br>' || sValue == '<br />' ) {
return '';
}
return sValue;
}
function copyLongDesc( sIdent )
{
var textVal = null;
try {
if ( WPro.editors[sIdent] != null ) {
WPro.editors[sIdent].prepareSubmission();
textVal = cleanupLongDesc( WPro.editors[sIdent].getValue() );
}
} catch(err) {
var varEl = document.getElementById(sIdent);
if (varEl != null) {
textVal = cleanupLongDesc( varEl.value );
}
}
if (textVal == null) {
var varName = 'editor_'+sIdent;
var varEl = document.getElementById(varName);
if (varEl != null) {
textVal = cleanupLongDesc( varEl.value );
}
}
if (textVal != null) {
var oTarget = document.getElementsByName( 'editval['+ sIdent + ']' );
if ( oTarget != null && ( oField = oTarget.item( 0 ) ) != null ) {
oField.value = textVal;
}
}
}
-->
</script>
[{/block}]
[{oxscript include="js/libs/jquery.min.js"}]
[{oxscript add="$(document).ready(function(a){a('.character-limit').keyup(function(){var b=156;var c=a(this).val().length;a('.counter').html(c);if(c>b){a(this).css('background','red')}else{a(this).css('background','limegreen')}})});"}]
</head>
<body>
[{include file="tooltips.tpl"}]
<div id="oxajax_data"></div>
<div class="[{$box|default:'box'}]" style="[{if !$box && !$bottom_buttons}]height: 90%;[{/if}]">
[{include file="inc_error.tpl" Errorlist=$Errors.default}]
<!-- Input help popup -->
<div id="helpTextContainer" class="yui-skin-sam">
<div id="helpPanel"></div>
</div>
Nachtrag: Das Script kann man natürlich auch so einbinden:
[{capture assign=deinScript}]
...
[{/capture}]
[{oxscript add=$deinScript}]
Oh, natürlich habe ich das alles in einen Modul. Das bläht sich auch gerade auf.
Den Code habe ich nur zur Anschau gepostet. Zum testen. Die Orginal Dateien sind bei mir unangetastet.
Allerdings kann ich momentan nur Blöcke ersetzen oder was hinzufügen. Wie man über ein Modul eine komplette php Datei oder ein .tpl ersetzen kann , habe ich noch nicht herausgefunden.
Wäre nicht schlecht zu wisssen. Weil mein Modul langsam unübersichtlich wird.
Dein Code schau ich mir noch an.